A variant of this question pops up on occasion, but none of the
answers I've seen thus far suit my use case. The solution usually
involves the recommendation to do something like this:
$(...).validate({
...,
submitHandler: function() {
// send AJAX request for calculation
}
});
What I find unsatisfactory about this solution is that the user is
still afforded the opportunity to click on a button that gets him
nowhere. My goal here is to remove that false affordance by starting
off with the submit button disabled and then only enabling it after
all fields are correctly filled-out.
Solutions I've thought of:
1) Polling (ugh), like so:
setInterval(function() {
if ( $('#myForm').valid() ) {
// enable submit button
} else {
// disable submit button
}
}, 500);
But the problem with this is that aside from the undesirable polling,
valid() does more than just validate the form--it validates *and*
flags all the errors on the page, making this approach less than
transparent.
I also tried a similar poll using numberOfInvalids(), but
unfortunately, an empty form returns 0 so long as there are no errors,
which would mean that my button would *always* remain enabled.
var checkForm = function() {
if ( validator.checkForm() ) {
// disable button
} else {
// enable button
}
return true;
};
$('#myForm').keyup(checkForm).change(checkForm).blur
(checkForm);
But while this is a bit better than polling, it still leaves me with
the undesirable side effect of displaying error messages on fields as
soon as the user clicks on 'em.
If checkForm() could be made public and then have it take an optional
boolean to suppress the error messaging, that would be one way to get
this to work...but having a simple callback option for validate()
would be even better:
$('#myForm').validate({
noErrorsHandler: function(validator) {
// yadda, yadda, yadda
}
Suggestions?
-dan
