表单提交时未通过jQuery验证插件测试

Question

我有一个表单，它正在向本地存储提交字段。验证器正在工作，但表单仍在提交已通过的字段，即使失败的验证尚未通过。在所有字段都通过验证之前，我如何阻止表单提交？

jsFiddle演示

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);
 });

Answer 1

您的自定义click处理程序超过了验证插件的点击事件。去掉if的click处理程序，并将其代码复制到插件的submitHandler回调选项中。此功能仅在单击按钮且满足验证时才会启动。

$('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;
    }
});

更新的演示：http://jsfiddle.net/xh4ho0hc/2/

Answer 2

我看到的问题是底部的函数。当该函数启动时，您将设置localStorage的变量，而不考虑验证器，并且与验证器无关

考虑使用一个变量和一些逻辑来查看是否所有变量都通过了验证。循环遍历表单控件元素，只有在所有变量都通过验证时才设置变量。最简单的方法是检查这些元素是否具有".has error"类