jQuery表单验证失败时不显示错误
jQuery Form Validation not showing error upon failure
注意:这是一个jQuery编码练习,所以我不允许使用插件或其他模块。
我做了一个简单的,典型的表单,想要检查,以确保表单字段被输入,而不是留空。如果是,则会出现显示错误的相应消息。到目前为止,我还没有成功。
在此之后,我将添加一个功能来确保输入有效的电子邮件。
My form:
<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');
和这里.
不应该在添加类时给出,因为它不是选择器并且是一个类名。
如果span
是'#'+field
的child
,你的selector
将工作,因为它是sibling
,它无法找到特定的span
与你使用它的方式。或者,您可以使用#' + field +' ~ span'
或#' + field +' + span'
。演示。点击这里了解更多关于选择器的信息
相关文章:
- ng消息仅在触摸时显示错误,并在错误的初始显示上转换
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- java脚本的数学方程显示错误的答案
- 如果用户输入的长度小于最小长度,则显示错误消息
- Push方法显示错误
- Javascript设置日期不起作用,显示错误的时间
- 显示错误的Ajax调用无法调试
- 显示错误结果的Javascript
- 分页逻辑显示错误的页码
- 如何显示错误消息
- 表单提交没有'如果为空,则不会显示错误消息
- 使用RecordRTC录制的WebRTC视频在IE和Safari中显示错误
- 如何仅在存在最小值和最大值时才显示错误消息
- AngularJS错误处理:根据错误数组显示错误
- PHP 显示错误的名称值
- 在 api 调用$resource显示错误和成功消息
- 为什么 Angularjs 总是显示错误消息
- 在单选按钮验证中同时显示错误消息
- jQuery'摇动'功能显示错误
- Jquery添加更多和删除冲突并显示错误值