I have a form that I validate with jQuery Validate. I want to be able to disable the submit button when the form is invalid but I am unsure of the best approach. To disable the button I can simply do this

$("#clientConfigurationForm input[type=submit]")
     .prop("disabled", !clientConfigValidation.valid());

The issue is where do I put this code? It seems that the only way to track all changes is to replicate the code in both unhighlight and highlight.

Is there a better way to approach this issue?

I have a form that I validate with jQuery Validate. I want to be able to disable the submit button when the form is invalid but I am unsure of the best approach. To disable the button I can simply do this

$("#clientConfigurationForm input[type=submit]")
     .prop("disabled", !clientConfigValidation.valid());

The issue is where do I put this code? It seems that the only way to track all changes is to replicate the code in both unhighlight and highlight.

Is there a better way to approach this issue?

• javascript
• jquery
• jquery-validate

• Why don't you put that code into a function and call the function in different places? I don't see anything wrong with replication then - the code is in one place and the function calls can be in many. – Kamil T Commented Sep 17, 2013 at 11:15
• Think about this for a minute... what's the initial state of the button when the page is first loaded? The button is not yet disabled, but an empty form is technically invalid. – Sparky Commented Sep 17, 2013 at 15:09

2 Answers 2

I'd execute it when an input is changed.

$('#yourForm input, #yourForm select, #yourForm textarea').on('change', checkForm);

function checkForm(){
    $("#clientConfigurationForm input[type=submit]")
        .prop("disabled", !clientConfigValidation.valid());
}

Quote OP's Comment:

"This doesnt entirely work, because if I enable and disable a checkbox then the form inputs disable and then bee enabled again, at this point clientConfigValidation.valid() says true but, on submit, it realises its not actually valid... Very odd"

This is caused by a timing issue regarding when the value of the checkbox actually changes.

To fix it change your change event into a click event to more immediately capture your checkbox and radio buttons. This does not seem to alter how the rest of the input elements behave, because you have to click on them when you change them.

$('input, select, textarea').on('click', checkForm);

function checkForm(){
    $("input[type=submit]")
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}

Working DEMO: http://jsfiddle/8umJ6/

If you notice any issues with one input type over another, you could tweak the code by specifying different events for different input types.

$('input[type="checkbox"], input[type="radio"]').on('click', checkForm);

$('input[type="text"], select, textarea').on('change', checkForm);

function checkForm(){
    $('input[type="submit"]')
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}