Hey,
How about
$('#form input,select,radio').change(function() { /* check to see if
necessary fields are filled out, if so enable submit */}
You do have some load for each change on a field, but it would keep the
user from being able to submit and validate until you're ready for them
to do so.
It's pretty simple, but everything looked so complicated the ways you
were trying.
-S
On Mon, 2009-03-16 at 12:02 -0700, D.Kreft wrote:
> 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
>
>
