一次显示所有验证错误，并且在修复之前不允许提交

Question

因此，我正在使用validate.js并且我的表单中包含以下内容； 它显示第一个字段（名字）的错误消息，仅此而已！ 如何立即显示所有错误，并且在解决之前不允许提交？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="js/main.js"></script>

---

$(document).ready(function () {
    $('.plastic').slideDown('fast');
    $('#contactform').validate({ // initialize the plugin
        // errorPlacement: function(){
        //     return false;
        // },
        submitHandler: function (form) {
            $('.formcolumn').hide();
            $('.button').hide();
            $('.thanks').fadeIn();
            // alert('valid form submitted'); 
            return false; // for demo
        }
    });

});

从本质上讲，它似乎只在验证名字？

我尝试了这个：

$('.button').click(function () {
    $('#contactform').valid(); // run a validity test on the form (shows any errors)
});

Answer 1

尝试这个：

$('#contactform').validate({
        rules: {
            name: {
                required: true
            },
            subject: {
                required: true
            },

            // Add more fields here


        },


        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-inline',
        errorPlacement: function(error, element) {

                error.insertAfter(element);


        },

        submitHandler : function(form) {
          form.submit();
         }

    });

编辑：

您的HTML应该如下所示：

<span class="form-group">
                     <input type="text" name="name" id="name" />
                 </span>