jquery验证在所有文件有效时启用表单:对于空文件不显示错误

Question

我希望按钮启用，如果所有的领域都是有效的，因为没有按钮启用和禁用的工作很好，但当我移动到下一个领域它突出了所有领域的错误，但我不希望这发生在任何方式来修复它，请指导它的方式。

JS代码：

​

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="myform">
  <input type="text" id="name2" name="name2" class="required" />
  <br/>
  <input type="text" id="name" name="name" class="required email" />
  <br/>
  <input type="text" id="name1" name="name1" class="required number" />
  <br/>
  <input type="submit" id="submit" disabled="disabled" />
</form>

​

Answer 1

在输入结束时，您还必须单击外部，以形成模糊的表单并进行验证。否则它就不能工作了

​

$(document).ready(function() {

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

    $("#myform").validate();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<form id="myform">
   <input type="text" id="name2" name="name2" class="required"/><br/>
    <input type="text" id="name" name="name" class="required email"/><br/>
    <input type="text" id="name1" name="name1" class="required number"/><br/>
 

    <input type="submit" id="submit" disabled="disabled" />
</form>

​

Answer 2

问题是您正在验证整个表单，这将同时验证所有字段。您需要遍历每个输入，并显式检查每个字段以查看它们是否有效。如果它们都有效，则只需启用提交按钮。

$(document).ready(function() {

   $('input').on('blur', function() {
     var allowSubmission = true;
     $("input").each(function() {
        if(!$(this).valid()) 
        {
            allowSubmission = false;
            return false;
        }
    });

    if(allowSubmission)
       $('#submit').prop('disabled', false)
    else
       $('#submit').prop('disabled', true)
  });
});

示例：http://jsfiddle.net/sd88wucL/109/