Keep submit button disabled while jquery.validation errors are true

Question

Having an issue getting my validation to work correctly. Using jquery.validate to do a basic login form with only a few fields needing to be required. I am keeping the input button disabled until all validations have passed but it is not working correctly. The error for the second input field is showing up as soon as focus leaves the first field and displaying an error message. Would like to only have the error message show up like it does usually for jquery.validate after the field has received focus and then loses focus and detects an error.

So basically, keep the submit button disabled until all fields are valid but do not show the error message until the field has been activated and then failed.

Here is my fiddle now:

FIDDLE

Here is the JS:

$('#my-login').validate({
onkeyup: false,
ignore: ":disabled,:hidden",

      submitHandler: function (form) {
      form.submit();
      }
      });
      $('#my-login input').on('blur', function () {
     var empty = false;
     $('#my-login > input').each(function() {
     if ($(this).val() == '') {
        empty = true;
    }
  });
  if (this.form != (empty) && $('#my-login').valid()) {
    $('#singleSubmitBtnLoan').prop('disabled', false);
  } else {
    $('#singleSubmitBtnLoan').prop('disabled', 'disabled');
  }
  });

   $("#singleSubmitBtnLoan").bind('click', function () {
if ($('#my-login').valid()) {
    $('#my-login').submit();
}
});

And my form here:

<form id="my-login" name="my-login-form" action="notYetDude" method="get">
 <div>
   <label for="lastName" class="proximo">Last Name</label>
        <input type="text" id="lastName" name="lastName" aria-required="true" class="inputExtender largeFont" maxlength="50" />
  </div>
    <div class="inputAdjust">
        <label for="userNum">Last 4 Digits of userNum</label>
        <input type="tel" id="userNum" name="userNum" aria-required="true" maxlength="4" size="5" />
    </div>
    <div>
    <label for="appId" class="proximo" id="tt1-label">Reference Number</label>
        <input type="tel" id="appId" name="appId" aria-required="true" maxlength="10" size="11" value="12345678" />
    </div>
    <div style="margin-top: -4px">
    <input type="submit" id="singleSubmitBtnLoan" class="dsu-button lightBlue dsuBtnStyleLogin" disabled="true">Sign In</input>
    </div>

Your jsFiddle is doing what incorrectly? Because when I tried it, as soon as all fields became valid, the "submit" button became active. — Sparky
– Sparky, Commented Sep 1, 2014 at 1:01
You clearly don't need the submitHandler if the only thing you're going to put in there is the default function. You also don't need the ignore option for the same reason... the plugin will ignore all hidden and disabled fields by default. — Sparky
– Sparky, Commented Sep 1, 2014 at 1:03
Yes, but the I do not want the error message on the 2nd input to show up immediately. Notice that when the first input field loses focus, the error message shows up immediately for the second field even though it has not been focused. That is the issue I am having with it currently. The disable feature is working, just showing the error too early. — isaac weathers
– isaac weathers, Commented Sep 1, 2014 at 1:04
IMO, the question was written very poorly: "I am keeping the input button disabled until all validations have passed but it is not working correctly." — Sparky
– Sparky, Commented Sep 1, 2014 at 2:36

Sparky · Accepted Answer · 2014-09-01 02:37:17Z

1

I think this was due to on blur event valid is called for the entire form and the errors were displayed.

I have changed it to hide the UI erros while doing this.

The changed if check in blur event is now,

 if (this.form != (empty) && $('#my-login').validate({
  errorClass: "invalidtemp"
}).checkForm()) {

...
}

Please check if this works for the need:

http://jsfiddle.net/passionintellectual/bnhpznd0/2/

edited Sep 1, 2014 at 2:37

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Sep 1, 2014 at 1:21

Ganesh Nemade

1,58912 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Nemade Over a year ago

I will take care of this Sparky. Thanks.

Collectives™ on Stack Overflow

Keep submit button disabled while jquery.validation errors are true

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related