jquery驗證器addClassRules方法不適用於所有元素

我是jquery驗證器的新手。我一直在這裏卡住，需要一些幫助jquery驗證器addClassRules方法不適用於所有元素

我有一些input字段與不同class爲他們每個人。我想通過添加由addClassRules方法的規則來驗證他們使用jquery驗證程序。

問題是添加類規則對第一條規則起作用，但之後不起作用。

下面是我的代碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Simple DataTable</title> 
<link rel="stylesheet" href="css/bootstrap.css"/> 
</head> 
<body> 
<center> 
<div class="container" > 
<h1>Welcome to boostrap</h1> 
</div> 

<form> 
    <table> 

     <tr> 
      <td><input type="text" class="abc"/></td> 
      <td><input type="text" class="jkl"/></td> 
      <td><input type="text" class="xyz"/></td> 
     </tr> 
     <tr> 
      <td><input type="text" class="abc"/></td> 
      <td><input type="text" class="jkl"/></td> 
      <td><input type="text" class="xyz"/></td> 
     </tr> 


    </table> 


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

</center> 
</body> 
<script src="js/jquery-3.1.1.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/jquery.validate.js"></script> 

<script> 
$(document).ready(function(){ 
    $.validator.addClassRules({ 
     abc:{ 
      required:true 
     }, 
     jkl:{ 
      required:true 
     }, 
     xyz:{ 
      required:true 
     } 

    }); 



    $("form").validate(); 
}); 

</script> 
</html>

的文檔：

https://jqueryvalidation.org/jQuery.validator.addClassRules/

提到什麼我也做了同樣的事情。有人能幫助我嗎？

來源

2017-01-03 Chetan

您需要使用input元素上的name屬性才能使其工作。你可以在下面的代碼片段中看到它。我已將debug屬性設置爲validate以突出顯示此內容。它會說例如爲：

<input type="text" class="abc error" aria-required="true">沒有分配

你也需要調用valid方法以及獲得錯誤顯示在表格上的名字。

所以在片段，您可以嘗試：

有錯誤提交 - 將在第一行顯示input s的標記爲無name屬性
提交，沒有任何錯誤（第一次運行該代碼段再次） - 將一些name屬性添加到第一行，並獲得所需的輸出。

請注意，片段函數不允許提交表單，所以我在按鈕單擊中包裝驗證和有效方法以模擬表單提交。見this link on Meta Stack Overflow。

HTH

$("#test1").on("click", function() { 
 
    // add rules 
 
    $.validator.addClassRules({ 
 
    abc: { 
 
     required: true 
 
    }, 
 
    jkl: { 
 
     required: true 
 
    }, 
 
    xyz: { 
 
     required: true 
 
    } 
 
    }); 
 
    // validate form 
 
    $("form").validate({debug: true}); 
 
    $("form").valid(); 
 
}); 
 

 
$("#test2").on("click", function() { 
 
    // add name attributes to first row 
 
    $("td:eq(0)").children(0).attr("name", "foo1"); 
 
    $("td:eq(1)").children(0).attr("name", "foo2"); 
 
    $("td:eq(2)").children(0).attr("name", "foo3"); 
 
    // add rules 
 
    $.validator.addClassRules({ 
 
    abc: { 
 
     required: true 
 
    }, 
 
    jkl: { 
 
     required: true 
 
    }, 
 
    xyz: { 
 
     required: true 
 
    } 
 
    }); 
 
    // validate form 
 
    $("form").validate({debug: true}); 
 
    $("form").valid(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 

 
<center> 
 
    <div class="container"> 
 
    <h1>Welcome to boostrap</h1> 
 
    </div> 
 

 
    <form> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <input type="text" class="abc" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="jkl" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="xyz" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input name="foo4" type="text" class="abc" /> 
 
     </td> 
 
     <td> 
 
      <input name="foo5" type="text" class="jkl" /> 
 
     </td> 
 
     <td> 
 
      <input name="foo6" type="text" class="xyz" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <!-- https://meta.stackoverflow.com/questions/339479/advise-that-submit-events-on-forms-does-not-work-on-code-snippets 
 
    <input type="submit" />--> 
 
    <input type="button" name="test1" id="test1" value="Submit with errors" /> 
 
    <input type="button" name="test2" id="test2" value="Submit with no errors" /> 
 
    </form> 
 

 
</center>

來源

2017-01-03 06:44:57

優秀。這工作，這是在jquery驗證器的文檔中提到的？ – Chetan

「標記建議」下的第四段：https：//jqueryvalidation.org/reference/。 –

jquery驗證器addClassRules方法不適用於所有元素

回答

相關問題