一次顯示所有驗證錯誤，並且在修復之前不允許提交

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>