The validate plugin has a success option that enables customization of
the valid fields on the form
It takes a string or a function. In the validate plugin documentation
the example is used to add a class to the label, but since it's a
function, you could make it do ...anything.
eg.
$("#myform").validate({
success: function() {
$("submitbutton").removeAttr("disabled"); },
submitHandler: function() { alert("Submitted!") }
})
You may have to use the invalidHandler to set the button to disabled,
after it has been enabled, if the form is no longer valid.
On Mar 17, 5:02 am, "D.Kreft" <dkr...@gmail.com> 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
