我有一个表单正在向localstorage提交字段。验证器正在运行,但表单仍在提交已通过的字段,即使验证失败也没有。如何保持表单提交直到所有字段都通过验证?
HTML:
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Add Publisher</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="col-lg-12">
<form>
<div class="form-group col-lg-6">
<label class="control-label" for="name">Publisher Name:</label>
<div class="input-group">
<input class="form-control name" placeholder="Publisher Name" name="name" type="text" />
</div>
</div>
<div class="form-group col-lg-6">
<label class="control-label" for="phone">Phone:</label>
<div class="input-group">
<input class="form-control phone" placeholder="Phone" name="phone" type="text" />
</div>
</div>
<div class="form-group col-lg-6">
<label class="control-label" for="website">Website:</label>
<div class="input-group">
<input class="form-control website" placeholder="website" name="website" type="text" />
</div>
</div>
<div class="form-group col-lg-6">
<label class="control-label" for="contact">Contact:</label>
<div class="input-group">
<input class="form-control contact" placeholder="Point of Contact" name="contact" type="text" />
</div>
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /.panel-body -->
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
jQuery的:
$('form').validate({
rules: {
name: {
minlength: 3,
maxlength: 35,
required: true
},
phone: {
minlength: 9,
maxlength: 10,
required: true
},
website: {
required: true,
url: true
},
contact: {
required: true,
minlength: 2
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$("#submit").click(function () {
var name = $(".name").val();
var phone = $(".phone").val();
var website = $(".website").val();
var contact = $(".contact").val();
localStorage.setItem('name', name);
localStorage.setItem('phone', phone);
localStorage.setItem('website', website);
localStorage.setItem('contact', contact);
});
答案 0 :(得分:1)
您的自定义click
处理程序覆盖了验证插件的click事件。摆脱click
处理程序,并将其代码复制到插件的the submitHandler
callback option。此功能仅在单击按钮并满足验证时触发。
$('form').validate({
rules: {
name: {
minlength: 3,
maxlength: 35,
required: true
},
phone: {
minlength: 9,
maxlength: 10,
required: true
},
website: {
required: true,
url: true
},
contact: {
required: true,
minlength: 2
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
var name = $(".name").val();
var phone = $(".phone").val();
var website = $(".website").val();
var contact = $(".contact").val();
localStorage.setItem('name', name);
localStorage.setItem('phone', phone);
localStorage.setItem('website', website);
localStorage.setItem('contact', contact);
return false;
}
});
更新了DEMO:http://jsfiddle.net/xh4ho0hc/2/
答案 1 :(得分:0)
我看到的问题是你的功能在底部。当该函数触发时,无论验证器如何,您都可以设置localStorage的变量,并且与其无关。
考虑使用变量和一些逻辑来查看是否所有变量都通过了验证。循环遍历表单控件元素,只有在所有变量实际通过验证时才设置变量。最简单的方法是检查这些元素是否具有&#34; .has-error&#34;类