vaildate多个输入文本字段与jQuery

Question

我有多个输入字段包含名称和电子邮件。如果用户可以通过单击添加新按钮来添加新的输入字段集合。在提交表单时如何验证这些新添加的输入字段？我听说这可以通过使用jquery.each来完成，但我不知道如何实现它。 有什么帮助吗？

代码在这里如下：

<div class="subsriber_list_view"> 
    <div class="sr"> 
Name:<input type="text" class="subsribe_name" autocomplete="off" name="name[]"> 
Email:<input type="text" class="subsribe_mail" autocomplete="off" name="email[]"> 
</div>  
<div class="subsriber_list_container" id="sr1"> 
    <div class="sr"> 
    Name:<input type="text" class="subsribe_name" autocomplete="off" name="name[]"> 
    Email:<input type="text" class="subsribe_mail" autocomplete="off" name="email[]"> 
    </div> 
    <div class="s_remove"> 
    <a href="javascript:void(0)">Remove</a> 
    </div> 
    </div> 
    <div class="subsriber_list_container" id="sr2"> 
     <div class="sr"> 
    Name:<input type="text" class="subsribe_name" autocomplete="off" name="name[]"> 
     Email:<input type="text" class="subsribe_mail" autocomplete="off" name="email[]"> 
     </div> 
    <div class="s_remove"> 
      <a href="javascript:void(0)">Remove</a> 
     </div> 
    </div> 
    <div class="subsriber_list_container" id="sr3"> 
      <div class="sr"> 
       Name:<input type="text" class="subsribe_name" autocomplete="off" name="name[]"> 
       Email:<input type="text" class="subsribe_mail" autocomplete="off" name="email[]"> 
      </div> 
     <div class="s_remove"> 
      <a href="javascript:void(0)">Remove</a> 
     </div> 
    </div> 
    <div class="subsriber_list_container" id="sr4"> 
      <div class="sr"> 
       Name:<input type="text" class="subsribe_name" autocomplete="off" name="name[]"> 
       Email:<input type="text" class="subsribe_mail" autocomplete="off" name="email[]"> 
      </div> 
     <div class="s_remove"> 
      <a href="javascript:void(0)">Remove</a> 
     </div> 
    </div> 
</div> 
<input type="hidden" name="referer_id" class="referer" value="1"> 
<input type="submit" name="subscriber_submit" class="subscriber" value="Subsribe to Join1000"> 
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> 

<script type='text/javascript'> 

    var me = jQuery || $.noConflict(); 
    me(document).ready(function() { 
     me(".add_new").click(function() { 
      me('span.err').remove(); // clear all existing error messages 
      me('input.subsribe_name').each(function() {     
       $subsribe_name = me(this).val(); 
       $subsribe_mail = me(this).val(); 
       if($subsribe_name == '') { 
        me('input.subsribe_name').after('<span class="err">Please Enter Referer name</span>').focus(); 
        return false; 
       }    

      var intId = me(".subsriber_list_view .subsriber_list_container").length + 1; 
      var fieldWrapper = me("<div class=\"subsriber_list_container\" id=\"sr" + intId + "\"/>"); 
      var fName = me("<div class='sr'>Name:<input type='text' class='subsribe_name' autocomplete='off'name='name[]' /> Email:<input type='text' class='subsribe_mail' autocomplete='off' name='email[]' />"); 
      var removeButton = me("<div class='s_remove'><a href='javascript:void(0)'>Remove</a></div></div></div>"); 
      fieldWrapper.append(fName); 
      fieldWrapper.append(removeButton);  
      me(".subsriber_list_view").append(fieldWrapper); 
      removeButton.click(function() { 
       me(this).parent().remove();   
      }); 
      }); 
     });  
     me('#sr .subscriber').click(function() { 
      me('span.err').remove(); // clear all existing error messages 
      $subsribe_name = me('.subsribe_name').val(); 
      $subsribe_mail = me('.subsribe_mail').val(); 
      if($subsribe_name == '') { 
       me('input.subsribe_name').after('<span class="err">Please Enter Referer name</span>').focus(); return false; 
      } 
      if($subsribe_mail == '') { 
       me('input.subsribe_mail').after('<span class="err">Please Enter Referer mail ID</span>').focus(); 
       return false; 
      } 
      var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 
      if (!filter.test($subsribe_mail)) { 
        me('input.subsribe_mail').after('<span class="err">Please input a valid email address!</span>').focus(); 
        return false;    
      }   
     }); 
}); 

Answer 1

插件会让你像更容易管理，总之附加一个单击处理程序，形成提交按钮

$("#form-submit-btn").on("click",function(e){ 
e.preventDefault();//prevent default form submission 

//perform your validation login 
//if the form is valid 
    //$(this).closest('form').submit(); 
//else 
    //show error messages 

}); 

Answer 2

您可能希望这样的..，DEMO

<form method="post" action="" id="userForm"> 
    <input type="text" name="name" /> 
    <input type="text" name="email" /> 
    <input type="text" name="name1" /> 
    <input type="text" name="email1" /> 
    <input type="submit" value="Submit" id="submitBtn" /> 
</form> 



$(function() { 

$("#submitBtn").click(function() { 

$("#userForm input[type=text]").each(function() { 

     if(!$(this).val()) { 
      alert("Please Fill All Fields"); 
      $(this).addClass('warn'); 
      $(this).focus(); 
      return false; 
    }  
    }); 
    return false; 
}); 
});