Question

如果所有字段都有效，我希望按钮启用，因为没有按钮启用和禁用工作正常，但当我移动到下一个字段时，它突出显示所有字段的错误，但我不希望这种情况以任何方式解决它，请指导它。

JS代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Answer 2

在输入结束时，您还必须单击外部以形成模糊并将验证。否则它不会工作

＆＃13;

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

＆＃13;

<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>

＆＃13;

当所有fileds有效时，jquery验证启用表单：对于空文件，不显示错误

2 个答案: