Question

I have 4 buttons on my form, a Submit, Cancel, Add and Remove button. All are working as expected but I would like to disable the Add button until the input field validates. I’m using the Validation plug-in and I think this can be done with a required validation with a callback but I’m not sure.

Could someone point me in the right direction?

UPDATE:

Here is an idea of some code

required: function(element) { 
   return($('#chargeamtaddButton').attr('disabled', ? '','disabled');
}

Looking for that true/false option flag to set the disabled attribute

Answer 1

I’ve used the validation plugin before but I can’t remember all the details. I’m pretty sure it’s something like this:

$(function() {
    $('#myForm').validate(
        rules: {
            'elementToWatch': {
                success: function(element) { 
                    if($("#myform").validate().element("#myselect")) {
                        $('#chargeamtaddButton:disabled').removeAttr('disabled');
                    } else {
                        $('#chargeamtaddButton').attr('disabled','disabled');
                    }
                },
                // etc...
             },
             // etc...
         },
         // etc...
     });
 });

Since there are so many ways to use the validation plugin, it’s hard to give you perfect advice but I hope what I’ve shown gives you a better idea of how to move forward. Maybe if you gave some more code and HTML, I could help you out more.