如何在所有字段对此特定代码有效后，才能在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

您只需检查表单是否有效。 This is official documentation。如果表单有效，您可以启用该按钮或只显示错误消息。

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

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