Question

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

我有一些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/

提到了我所做的一切。有人可以帮帮我吗？

Answer 1

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

<input type="text" class="abc error" aria-required="true">没有指定名称

此外，您还需要调用valid方法，以便在表单上显示错误。

所以在代码片段中你可以尝试：

提交时出现错误 - 会显示第一行中的input被标记为没有name属性
提交时没有任何错误（首先再次运行代码段） - 在第一行添加一些name属性，然后获得所需的输出。

请注意，代码段功能不允许表单提交，因此我将按钮点击中的验证和有效方法包装起来以模拟表单提交。请参阅this link on Meta Stack Overflow。

HTH

＆＃13;

$("#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();
});

＆＃13;

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

＆＃13;

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

1 个答案: