好的,我正在做这个jQuery,似乎无法让所有孩子都工作。 只有第一个孩子做了它所说的......它附加了一个错误行。 为什么其他人被忽视?
$(document).ready(function() {
var firstName = $('input[name=firstName]').val();
var lastName = $('input[name=lastName]').val();
var email = $('input[name=email]').val();
var address = $('input[name=addressBox').val();
var phoneNum = $('input[name=phoneNumber').val();
var dob = $('input[name=dob').val();
$('#submitbtn').click(function() {
if (firstName.length < 2) {
$("form label:first-child").append("<p class='turnsRed'>You need to enter your first name</p>");
} else if (lastName.length < 2) {
$("form label:nth-child(3)").append("<p class='turnsRed'>You need to enter your last name</p>");
} else if (address.length < 2) {
$("form label:nth-child(4)").append("<p class='turnsRed'>You need to enter your address</p>");
} else if (dob.length < 1) {
$("form label:nth-child(5)").append("<p class='turnsRed'>You need to enter your date of birth</p>");
} else if (email.length < 2) {
$("form label:nth-child(6)").append("<p class='turnsRed'>You need to enter your email</p>");
} else if (phoneNum.length < 1) {
$("form label:nth-child(7)").append("<p class='turnsRed'>You need to enter your phone number</p>");
};
});
});
html位看起来像这样:
<form>
<label for="first name">Your first name</label><br>
<input type="text" name="firstName" value=""><br>
<label for="middle name">Your middle name (optional)</label><br>
<input type="text" name="middle name" value=""><br>
<label for="last name">Your last name</label><br>
<input type="text" name="lastName" value=""><br>
<label for="your address">Your address (inc. zip/post code)</label><br>
<input type="text" name="addressBox" value=""><br>
<input type="text" name="addressBox" value=""><br>
<input type="text" name="addressBox" value=""><br>
<input type="text" name="addressBox" value=""><br>
<label for="dof">Your date of birth</label><br>
<input type="text" name="dob" value=""><br>
<label for="your email">Your email</label><br>
<input type="email" name="email" value=""><br>
<label for="phone number">Your mobile phone number</label><br>
<input type="number" name="phoneNumber" value="">
</form>
第二个孩子被故意遗漏'因为它与中间名相关联,这是可选的。
答案 0 :(得分:0)
var firstName = $('input[name=firstName]').val();
此时返回输入的值。
过了一会儿,当您点击按钮时,firstName
仍然是之前的值。
因此,您需要做的是动态获取值。
答案 1 :(得分:0)
首先,您要在文档就绪事件中立即获取输入值,这样您的代码就不会知道更改。在点击事件中移动你的getters,你将能够获得他们的最新价值。考虑到这一点,我在代码上做了一些改进,如下所示。
$(document).ready(function() {
$('#submitbtn').click(function() {
var firstName = $('input[name=firstName]').val();
var lastName = $('input[name=lastName]').val();
var email = $('input[name=email]').val();
var address = $('input[name=addressBox]').val(); // typo
var phoneNum = $('input[name=phoneNumber]').val(); // typo
var dob = $('input[name=dob]').val(); // typo
// Remove old warnings in case of duplication
$("form .turnsRed").remove();
if (firstName.length < 2) {
$("form label:first-child").append("<p class='turnsRed'>You need to enter your first name</p>");
} else if (lastName.length < 2) {
$("form label:nth-child(3)").append("<p class='turnsRed'>You need to enter your last name</p>");
} else if (address.length < 2) {
$("form label:nth-child(4)").append("<p class='turnsRed'>You need to enter your address</p>");
} else if (dob.length < 1) {
$("form label:nth-child(5)").append("<p class='turnsRed'>You need to enter your date of birth</p>");
} else if (email.length < 2) {
$("form label:nth-child(6)").append("<p class='turnsRed'>You need to enter your email</p>");
} else if (phoneNum.length < 1) {
$("form label:nth-child(7)").append("<p class='turnsRed'>You need to enter your phone number</p>");
};
});
});
在验证部分,如果要同时验证所有值,则必须删除else条件。