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

你可能想要这样..，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;
});
});

Answer 2

插件将使您更容易管理，无论如何附加点击处理程序以形成提交按钮

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

});

使用jquery验证多个输入文本字段

2 个答案: