[英]jQuery Form Validation not showing error upon failure
注意:这是一个jQuery编码练习,所以我不允许使用插件或其他模块。
我做了一个简单,典型的表单,想要检查以确保输入表单字段而不是留空。 如果是,则会显示相应的消息,显示错误。 到目前为止,我还没有成功。
在此之后,我将添加一个功能,以确保输入有效的电子邮件。
我的表格:
<form id="myForm">
<input type="text" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span><br />
<input type="password" placeholder="Password" id="pword" name="pword">
<span class="error">Password not entered</span><br />
<input type="text" placeholder="First Name" id="fname" name="fname">
<span class="error">First Name not entered</span><br />
<input type="text" placeholder="Last Name" id="lname" name="lname">
<span class="error">Last Name not entered</span><br />
<input type="submit" value="Submit">
</form>
jQuery的:
$(document).ready(function(){
// field mapping
var form_fields = {
'email' : 'email',
'pword' : 'password',
'fname' : 'first name',
'lname' : 'last name'
};
// make sure form fields were entered
$('#myForm').on('submit', function(e){
e.preventDefault();
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field + ' span').addClass('.error_show');
}
}
});
});
CSS:
.error {
display: none;
}
.error_show {
display: inline-block;
color: red;
margin-bottom: 1em;
}
一切正常,除了您选择element
后续span
以及添加error class
。 您可以使用.next查找已验证input
的下一个element
,然后我想提及下面要做的更改,这里是DEMO
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next('.error').addClass('error_show'); //get the next element with class .error
}
}
你添加类的方式是
.addClass('.error_show');
并在这里.
添加类时不应该给出,因为它不是选择器而是类名。
UPDATE
如果span
是'#'+field
child
,那么你的selector
将起作用,因为它是sibling
它无法按照你使用它的方式找到特定的span
。或者你可以使用#' + field +' ~ span'
或#' + field +' + span'
。 在这里演示 。 在这里了解更多不同的选择器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.