僅在所有字段對此特定代碼均有效之后，才如何禁用jQuery中的提交按鈕

Question

這是我的代碼，我想僅在所有字段均有效時啟用提交按鈕。 我試過通過檢查所有字段的長度來輸入所有字段來啟用按鈕，但是應該檢查所有驗證。

$(document).ready(function() {              
$(".select2").select2();

//Traditional form validation sample
$('#form_traditional_validation').validate({
            focusInvalid: false, 
            ignore: "",
            rules: {

                Address: {
                    minlength: 10,
                    required: true
                },
                City: {
                    minlength: 5,
                    required: true
                },
                State: {
                    minlength: 5,
                    required: true
                },
                Country: {
                    minlength: 5,
                    required: true
                },
                PostalCode: {
                   digits: true,
                    maxlength: 6,
                    minlength: 6,
                    required: true
                },

                TeleCode: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                    required: true
                },

                date:{
                    date: true,
                    required: true
                },
                Name: {
                    minlength: 2,
                    required: true
                },
                profession: {
                    minlength: 2,
                    required: true
                },
                companyName: {
                    minlength: 4,
                    required: true
                },
                area: {
                    minlength: 2,
                    required: true
                },

                prepaid1: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                },
                prepaid2: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                },
                prepaid3: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                },
                prepaid4: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                },
                company1: {
                    digits: true,
                    maxlength: 10,
                    minlength: 10,
                },
    },

            invalidHandler: function (event, validator) {
                //display error alert on form submit    
            },

            errorPlacement: function (label, element) { // render error placement for each input type   
                $('<span class="error"></span>').insertAfter(element).append(label)
                var parent = $(element).parent('.input-with-icon');
                parent.removeClass('success-control').addClass('error-control');  
            },

            highlight: function (element) { // hightlight error inputs
                var parent = $(element).parent();
                parent.removeClass('success-control').addClass('error-control'); 
            },

            unhighlight: function (element) { // revert the change done by hightlight

            },

            success: function (label, element) {
                var parent = $(element).parent('.input-with-icon');
                parent.removeClass('error-control').addClass('success-control'); 
            },

            submitHandler: function (form) {

            }
        });
$('#rootwizard').bootstrapWizard({
        'tabClass': 'form-wizard',
        'onNext': function(tab, navigation, index) {
            var $valid = $("#commentForm").valid();
            if(!$valid) {
                $validator.focusInvalid();
                return false;
            }
            else{
                $('#rootwizard').find('.form-wizard').children('li').eq(index-1).addClass('complete');
                $('#rootwizard').find('.form-wizard').children('li').eq(index-1).find('.step').html('<i class="fa fa-check"></i>'); 
            }
        }
 });     

}); 

Answer 1

您可以簡單地檢查表格是否有效。 這是官方文檔 。 如果表單有效，則可以啟用該按鈕或僅顯示錯誤消息。

var validator = $( "#myform" ).validate();

if(validator.form())
  //Enable the button
else
   //Show error messages