-1

名前と電子メールを含む複数の入力フィールドのセットがあります。ユーザーが [新規追加] ボタンをクリックして新しい入力フィールドのセットを追加できる場合。フォームの送信時に、これらの新しく追加された入力フィールドを検証する方法は? これは を使用して実行できると聞きましたが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;               
            }           
        });
});
4

2 に答える 2

2

あなたはこのようにしたいかもしれません..、デモ

<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;
});
});
于 2013-03-12T04:47:30.337 に答える