使用jquery验证多个同名字段

I am trying to get jquery validate to work on multiple fields. Reason being I have dynamically generated fields added and they are simply a list of phone numbers from none to as many as required. A button adds another number.

我试图让jquery验证在多个字段上工作。原因是我添加了动态生成的字段,它们只是一个电话号码列表,从无到需要的数量。一个按钮添加另一个数字。

So I thought I'd put together a basic example and followed the concept from the accepted answer in the following link:

所以我想我会把一个基本的例子放在一起,并按照以下链接中接受的答案的概念:

Using JQuery Validate Plugin to validate multiple form fields with identical names

使用JQuery Validate Plugin验证具有相同名称的多个表单字段

However, it's not doing anything useful. Why is it not working?

但是,它没有做任何有用的事情。为什么不起作用?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>


<script>
  $("#submit").click(function(){
    $("field").each(function(){
      $(this).rules("add", {
        required: true,
        email: true,
        messages: {
          required: "Specify a valid email"
        }
      });   
    })
  });


  $(document).ready(function(){
    $("#myform").validate();
  });
</script>

</head>
<body>

<form id="myform">
  <label for="field">Required, email: </label>
  <input class="left" id="field" name="field" />
  <input class="left" id="field" name="field" />
  <input class="left" id="field" name="field" />
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" id="submit" name="submit" />
</form>

</body>
</html>

1 个解决方案

#1

This: $("field").each(function(){
Should be: $("[name=field]").each(function(){

这:$(“field”)。each(function(){should be:$(“[name = field]”)。each(function(){

Also your IDs should be unique, you'll get unpredictable behavior when this isn't true. Also, you should move the rule adding inside the document.ready, like this (this is now all your script):

此外,您的ID应该是唯一的,如果不是这样,您将获得不可预测的行为。此外,您应该将文档添加到document.ready中,就像这样(现在这是您的所有脚本):

$(function(){
  $("#myform").validate();
  $("[name=field]").each(function(){
     $(this).rules("add", {
       required: true,
       email: true,
       messages: {
         required: "Specify a valid email"
       }
     });   
   });
});

#1