发表新帖
发表新帖

jQuery Validate plugin, enable submit button when form is valid

前端 未结
关注
4 824
感动是毒
感动是毒 2020-12-15 11:50

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

相关标签:
4条回答
  • 面向向阳花
    2020-12-15 11:57

    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.

    0 讨论(0)
  • 终归单人心
    2020-12-15 11:58 
      <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'})
    }
  }
});
    0 讨论(0)
  • 不知归路
    2020-12-15 12:02

    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

    0 讨论(0)
  • 有刺的猬
    2020-12-15 12:05 
    $('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/

    0 讨论(0)
 看不清?
提交回复
热议问题