jquery 验证器 addClassRules 方法不适用于所有元素

Question

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

我有一些 input 字段，每个字段都有不同的 class。我想使用 jquery 验证器通过 addClassRules 方法添加规则来验证它们。

问题是添加 class 规则对第一条规则起作用，但之后就不起作用了。

下面是我的代码

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

提到了我所做的同样的事情。有人可以帮我吗？

Answer 1

您需要在 input 元素上使用 name 属性才能使其正常工作。您可以在下面的代码片段中看到这一点。我已将 validate 上的 debug 属性设置为 true 以突出显示这一点。它会说例如：

<input type="text" class="abc error" aria-required="true"> has no name assigned

您还需要调用 valid 方法来让错误显示在表单上。

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

提交错误 - 将显示第一行中的 input 被标记为没有 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.whosebug.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>

jquery 验证器 addClassRules 方法不适用于所有元素

jquery validator addClassRules method not applying to all elements

javascript

jquery

jquery-validate