當所有文件有效時，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() { 
    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

在輸入結束時，您還可以選擇單擊外面形成將變得模糊，並驗證。否則將無法正常工作

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