jail을 사용하여 여러 입력 텍스트 필드를 균등하게

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; 
}); 
});