jQuery Validate plugin, enable submit button when form is valid

Question

I have an enabled and disabled state for the submit button on my form.

The conditions are as follows:

If all input fields have been entered and are valid enable the submit button.

If some fields have not been entered do not enable the submit button.

So far the validation is being done within the onkeyup event and is only working for the first input:

//Custom onkeyup validation
            onkeyup: function(element) {
                //Check if input is empty remove valid class from parent
                var formInput = $(element),
                    formInputParent = $(element).parent('fieldset');
                if(formInputParent.hasClass('form--valid') && formInput.val() === "") {
                    formInputParent.removeClass('form--valid');
                }

                //Check if all fields are not empty to remove submit--disabled class
                var formInputs = $('form').find(':input');
                console.log(formInputs);

                formInputs.each(function(){
                    if(formInputs.length > 0) {
                        formInputs.parents('form').find('.submit-form').removeClass('submit--disabled');
                    } 
                });

            }

Check here for a DEMO

Duplicate of this: stackoverflow.com/a/21956309/594235

Sparky
– Sparky

2014-11-20 21:50:23 +00:00
Commented Nov 20, 2014 at 21:50 — Sparky
– Sparky, Commented Nov 20, 2014 at 21:50

Community · Accepted Answer · 2017-05-23 12:16:55Z

25

You would simply construct a blur (or even a keyup) handler function to toggle the button based on the form's validity. Use the plugin's .valid() method to test the form.

$('input').on('blur', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

DEMO: http://jsfiddle.net/sd88wucL/

Instead, you could also use both events to trigger the same handler function...

$('input').on('blur keyup', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

DEMO 2: http://jsfiddle.net/sd88wucL/1/

Source: https://stackoverflow.com/a/21956309/594235

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Nov 20, 2014 at 21:46

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

8 Comments

Filth Over a year ago

Sparky, although this is great - this validation triggers all form fields on the page once you 'blur' from one input. Is it possible to validate only each input as you go?

Sparky Over a year ago

@Filth, yes and no. Yes, you can attach .valid() to the individual fields within the onfocusout handler. However, for activating your submit button, you cannot invoke .valid() to return a boolean without also invoking the error messages... .valid() does both at the same time. No method is provided that can tell you if the form is valid without also activating validation on the form.

Filth Over a year ago

That's exactly the issue I'm having. I've tried adding the blur function to the onfocusout but that disabled the validation I have for the unhighlight / highlight functions for adding and removing valid / error classes. Is there any workaround I can do to achieve this? I have tried setting up custom functions to check all inputs for error messages to then enable the submit button but with no luck...

Sparky Over a year ago

@Filth, I've answered over a thousand jQuery Validate questions and probably read all 4700 questions on SO... and I know of nothing that can tell you the form is valid without also triggering the validation messages. If you write your own custom function for this, then you wouldn't need the plugin because you'd essentially be writing client-side validation from scratch. Maybe you can restrict the handler above to only fire when no fields are left blank... it's not perfect.

Filth Over a year ago

You definitely are a whizz when it comes to jQuery Validate no doubt! Thanks for your time.

|

Anima-t3d · Accepted Answer · 2017-08-28 09:37:01Z

3

The code below is what I ended up with so far:

$('#formId').on('blur keyup change', 'input', function(event) {
  validateForm('#formId');
});

function validateForm(id) {
  var valid = $(id).validate().checkForm();
    if (valid) {
      $('.form-save').prop('disabled', false);
        $('.form-save').removeClass('isDisabled');
    } else {
      $('.form-save').prop('disabled', 'disabled');
      $('.form-save').addClass('isDisabled');
    }
}

// Run once, so subsequent input will be show error message upon validation
validateForm('#formId');

It uses checkForm() instead of the form() and my disable button has the classform-save

It is based on @Sparky's answer

There is an issue filed on the jquery-validation git repo.

answered Aug 28, 2017 at 9:37

Anima-t3d

3,5856 gold badges41 silver badges57 bronze badges

1 Comment

Vinny Over a year ago

This was the only solution that worked, the accepted answer will trigger validation feedback for all the inputs as soon as you start typing.

Foxbond · Accepted Answer · 2014-11-20 21:20:41Z

1

$('form').find(':input').each(function(index, value){
    //action for every element
    $(value);
});

In this case you can do this that way: (but I dont like this solution)

var areSomeFieldsEmpty = false;
$('form').find(':input').each(function(i, v){
  if ($(v).val().length <= 0){
     areSomeFieldsEmpty = true;
  }
});

if (!areSomeFieldsEmpty){
  //unlock form   
}

http://jsfiddle.net/89y26/335/

edited Nov 20, 2014 at 21:20

answered Nov 20, 2014 at 20:49

Foxbond

691 silver badge5 bronze badges

Comments

Vijayashok · Accepted Answer · 2019-12-20 09:48:48Z

  <html>
     <form id="form">
     name<br>
     <input type="text"><br>
     Roll Number<br>
     <input type="number"><br>
     <input id="next" type="submit" disabled="disabled">
     </form>
  </html>

Initially, I have set submit button disabled and for each change in the input tag I will call a function to validate the form using jquery

  $("input[type='text'], input[type='number']").on("input", function () {       
   validate();
  });

  function validate(){  
    var show = true;  
    $("input[type='text'], input[type='number']").each(function(){
      if($(this).val()==''){
          show = false;
      }
    });

    if(show){
      $('#next').css({cursor:'pointer'})
      $('#next').removeAttr('disabled')
    }
    else {
      $('#next').css({cursor:'not-allowed'})
    }
  }
});

Collectives™ on Stack Overflow

jQuery Validate plugin, enable submit button when form is valid

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related