how to disable submit button in jquery only after all the fields are valid for this specific code

Question

Here is my code i want to enable the submit button only when all the fields are valid. I tried i can enable the button by checking all the fields are entered by checking their lengths but all the validations should be checked.

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

});

Nupur · Accepted Answer · 2014-01-16 05:54:22Z

1

You can simply check if the form is valid. This is official documentation. If the form is valid, you can enable the button or simply show the error message.

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

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

answered Jan 16, 2014 at 5:54

Nupur

6166 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

usermamba Over a year ago

thanks it is working but there is a little problem the last field is not checked for validation, so where should I call this function? I mean on which event?

Nupur Over a year ago

Since your submit button is disabled, you will need to validate it on 'focusout'. jqueryvalidation.org/category/plugin will give you all the options to run your validation function.

Collectives™ on Stack Overflow

how to disable submit button in jquery only after all the fields are valid for this specific code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related