CODEWITHSUNDEEP
jqueryjquery-validate
Filth
Filth

Reputation: 3228

jQuery Validate plugin, enable submit button when form is valid

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

Upvotes: 9

Views: 31397

Answers (4)

Vijayashok
Vijayashok

Reputation: 1

  <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'})
    }
  }
});

Upvotes: 0

Anima-t3d
Anima-t3d

Reputation: 3565

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.

Upvotes: 3

Sparky
Sparky

Reputation: 98738

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

Upvotes: 25

Foxbond
Foxbond

Reputation: 69

$('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/

Upvotes: 1

Related Questions