I'm terribly sorry to post this question yet again, as it seems to
come up quite frequently, but the answers I've seen have all been
unsatisfactory to 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 with 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.
The only solution that seems to present itself here involves some sort
of 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.
Suggestions?
-dan
