js代码的一部分不能在HTML中工作

时间：2014-03-27 13:15:20

标签： javascript jquery html css

我正在编写输入网站并希望突出显示空字段。我想用if语句检查它们是否为空，然后添加突出显示它们的类。

我的代码：

HTML：

<<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type="text/javascript" src="script.js"></script> 
</head>
<body>

<div id="nav">
<h1 class="tcontent"> Welcome to the Site!<h1>
</div>

<div id="header">
<h2 class="tcontent"> Register now! </h2>
<p class="tcontent"> To register just fill out the form below and click submit </p>
</div>

<div id="name">
    <div class="da">First Name: </div>
        <input type="text" name="firstname" class="ip" id="input1" placeholder="firstname"><br><br>
    <div class="da">Last Name: </div>
        <input class="ip" type="text" name="lastname" id="input2" placeholder="lastname">
</div>

<div id="email">
    <div class="da">Email: </div>
        <input type="text" name="email"  class="ip" id="input3" placeholder="email"><br><br>
    <div class="da">Email bestaetigen: </div>
        <input class="ip" type="text" name="emailc" id="input4" placeholder="email bestaetigen">
</div>

<div id="pw">
    <div class="da">Passwort: </div>
        <input type="password" name="password" class="ip" id="input5" placeholder="Passwort eingeben">
    <div class="da">Passwort bestaetigen: </div>
        <input type="password" name="passwordc" class="ip" id="input6" placeholder="Passwort bestaetigen">
</div>

<div id="captcha">
    <p style="font-size:25px" class="tcontent">Here is gonna be a <strong>captcha</strong></p>
</div>
    <div id="submit">
    <input type="radio" name="accept" id="check"><p id="checktxtt"> I agree to the 
        <a href="http://www.google.com">Terms and Conditions</a> </p>
    <p id="checktxtb" >All filled out and ready to go?</p>
        <input type="button" onclick="dcc (); pwc (); hi ();" value="Submit" id="button">
</div>

</body>
</html>

JS：

var pwc = function () {
    if (document.getElementById('input5').value.length<6) {
    alert("PW too short!");
}
else if(document.getElementById('input5').value!==document.getElementById('input6').value)
    alert("PW do not match!");
};

var dcc = function () {
    if (document.getElementById('input1').value===""||document.getElementById('input2').value==="" ||document.getElementById('input3').value==="" ||document.getElementById('input4').value==="" ||document.getElementById('input5').value==="" ||document.getElementById('input6').value==="")
    alert("Somethings missing!");
};

var hi = function () {
    if($('#input1').val()==="") {
        $('#input1').addClass('hi'); 
    }
};

CSS：

应该添加的类：

.hi {
    border-color: red;
    border-width: 0.01em;
    margin-right: 15em;
    margin-top: 1.05em;
    float: right;
}

JSFiddle没有检测到我的JS代码的问题。但是输入字段没有突出显示，似乎没有添加类“hi”。 另外两个JS函数功能很好。 我选择了正确的条件吗？ 如果缺少某些东西或者某些东西不够清楚，请发表评论，我会尽力澄清。 非常感谢任何帮助！

更改代码：

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <title></title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type="text/javascript" src="script.js"></script>

</head>
<body>

<div id="nav">
<h1 class="tcontent"> Welcome to the Site!<h1>
</div>

<div id="header">
<h2 class="tcontent"> Register now! </h2>
<p class="tcontent"> To register just fill out the form below and click submit </p>
</div>

<div id="name">
    <div class="da">First Name: </div>
        <input type="text" name="firstname" class="ip" id="input1" placeholder="firstname"><br><br>
    <div class="da">Last Name: </div>
        <input class="ip" type="text" name="lastname" id="input2" placeholder="lastname">
</div>

<div id="email">
    <div class="da">Email: </div>
        <input type="text" name="email"  class="ip" id="input3" placeholder="email"><br><br>
    <div class="da">Email bestaetigen: </div>
        <input class="ip" type="text" name="emailc" id="input4" placeholder="email bestaetigen">
</div>

<div id="pw">
    <div class="da">Passwort: </div>
        <input type="password" name="password" class="ip" id="input5" placeholder="Passwort eingeben">
    <div class="da">Passwort bestaetigen: </div>
        <input type="password" name="passwordc" class="ip" id="input6" placeholder="Passwort bestaetigen">
</div>

<div id="captcha">
    <p style="font-size:25px" class="tcontent">Here is gonna be a <strong>captcha</strong></p>
</div>
    <div id="submit">
    <input type="radio" name="accept" id="check"><p id="checktxtt"> I agree to the 
        <a href="http://www.google.com">Terms and Conditions</a> </p>
    <p id="checktxtb" >All filled out and ready to go?</p>
        <input type="button" onclick="dcc (); pwc (); hi ();" value="Submit" id="button">
</div>

</body>
</html>

CSS：

div {
border: 2px dotted black;
height: 100px;
width:700px;
display: block;
position: relative;
margin: auto;
margin-top:1em;

}

.tcontent {
margin:auto;
position:relative;
text-align:center;
margin-top:1em;
}

.ip {
float:right;
width:10em;
margin-right:15em;
margin-top:1em;
position: relative; 
}


.arrange {
width:100em;
margin-left:15em;

}
.da {
margin-top:0.9em;
border: none;
float: left; 
position:relative; 
margin-left:13em;
background-color:green;
width:140px;
overflow:hidden;
height:20px;
}

.hi {
border:1px solid red;
margin-right: 15em;
margin-top: 1.05em;
float: right;
}

#check {
width:20px;   
float:left;
margin-top:1.25em;
margin-left:17.0em
}

#checktxtt {
float:right;   
margin-right: 13.5em;

}
#checktxtb {
float:left;   
margin-left: 13.5em;
margin-top: 0.2em;
position:relative;   
}
#button {
float:right;
margin-right:16em;
}

JS：

var pwc = function () {
if (document.getElementById('input5').value.length<6) {
alert("PW too short!");
}
else if(document.getElementById('input5').value!==document.getElementById('input6').value)
alert("PW do not match!");
};

var dcc = function () {
if (document.getElementById('input1').value==="" ||document.getElementById('input2').value==="" ||document.getElementById('input3').value==="" ||document.getElementById('input4').value==="" ||document.getElementById('input5').value==="" ||document.getElementById('input6').value==="")
alert("Somethings missing!");
};


var hi = function () {

if($('#input1').val()==="") {
    $('#input1').addClass('hi'); 
}
};

2 个答案:

答案 0 :(得分：0)

你可以试试这个小提琴吗？ http://jsfiddle.net/5Qeqh/1/ 

<input type="text" name="firstname" class="ip" id="input1" placeholder="firstname">
<br>
<a href="#" id="check">Check</a>

jQuery( document ).ready(function( $ ) {          
    $( "#check" ).click(function() {
         $('input[type=text]').each(function(){          
            var value = $(this).val();
          if (value == ""){
             $(this).addClass("red");
          }
       });
    });    
});

.red{
    background-color:red;
}

答案 1 :(得分：0)

你的代码没有变化就好了。

唯一的问题是你没有设置边框样式，所以你设置0.02em宽的红色边框， 但你没有告诉浏览器如何绘制它。

将您的边框内容更改为border:1px solid red;，这样就可以了。

这是一个小提琴：http://jsfiddle.net/az8Uz/

编辑：

在您更新的代码中包含jQuery，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

这是错误的，因为它会在您的域中搜索它。

您需要在链接的开头添加http:：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
相关问题
最新问题