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方法不适用于所有元素

回答

相关问题