Javascript jquery验证程序addClassRules方法未应用于所有元素_Javascript_Jquery_Jquery Validate

Javascript jquery验证程序addClassRules方法未应用于所有元素

javascript jquery

Javascript jquery验证程序addClassRules方法未应用于所有元素,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我是jquery验证器的新手。我被困在这里，需要帮助我有一些input字段，每个字段都有不同的class。我想使用jqueryvalidator通过addClassRules方法添加规则来验证它们问题是，添加类规则对第一个规则有效，但之后就不起作用了下面是我的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple DataTab

我是jquery验证器的新手。我被困在这里，需要帮助

我有一些

input

字段，每个字段都有不同的

class

。我想使用jqueryvalidator通过

addClassRules

方法添加规则来验证它们

问题是，添加类规则对第一个规则有效，但之后就不起作用了

下面是我的代码

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


简单数据表
欢迎来到boostrap
$（文档）.ready（函数（）{
$.validator.addClassRules({
abc:{
必填项：true
},
jkl：{
必填项：true
},
xyz：{
必填项：true
}
});
$（“表单”）.validate（）；
});

文件载于：

提到了我做过的同样的事情。有人能帮我吗？

您需要在

input

元素上使用

name

属性才能使其正常工作。您可以在下面的代码片段中看到这一点。我已将

validate

上的

debug

属性设置为true，以突出显示该属性。它会说，例如：

没有指定名称

此外，您还需要调用

valid

方法，以使错误显示在表单上

因此，在代码段中，您可以尝试：

带错误提交-将显示第一行中的
```
输入
```
s标记为没有
```
名称
```
属性
无错误提交（首先再次运行代码段）-将一些
```
name
```
属性添加到第一行，您将获得所需的输出

请注意，snippet函数不允许表单提交，因此我将validate和valid方法包装在按钮单击中，以模拟表单提交。看

嗯

$（“#test1”）。在（“单击”，函数（）{
//添加规则
$.validator.addClassRules({
abc:{
必填项：true
},
jkl：{
必填项：true
},
xyz：{
必填项：true
}
});
//验证表单
$（“form”）.validate（{debug:true}）；
$（“表格”）.valid（）；
});
$（“#test2”）。在（“单击”，函数（）上）{
//将名称属性添加到第一行
$（“td:eq（0）”）.children（0）.attr（“name”，“foo1”）；
$（“td:eq（1）”）。儿童（0）。属性（“姓名”，“食物2”）；
$（“td:eq（2）”）.children（0）.attr（“name”，“foo3”）；
//添加规则
$.validator.addClassRules({
abc:{
必填项：true
},
jkl：{
必填项：true
},
xyz：{
必填项：true
}
});
//验证表单
$（“form”）.validate（{debug:true}）；
$（“表格”）.valid（）；
});

欢迎来到boostrap
非常好。成功了，这在jquery validator的文档中提到了吗？标记建议下的第四段：。