44

このjquery 検証プラグインを次のフォームに使用しました。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

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

    function addInput() {
        var obj = document.getElementById("list").cloneNode(true);
        document.getElementById('parent').appendChild(obj);
    }
</script>

<form id="commentForm" method="get" action="">
    <p id="parent">
        <input id="list"  class="required" />
    </p>

    <input class="submit" type="submit" value="Submit"/>
    <input type="button" value="add" onClick="addInput()" />
</form>

追加ボタンをクリックすると、新しい入力が動的に追加されます。ただし、フォームが送信されると、最初の入力フィールドのみが検証されます。動的に追加された入力を検証するにはどうすればよいですか? ありがとうございました...

4

10 に答える 10

55

入力には「名前」属性が必要です。ルールを動的に追加する必要があります。1 つのオプションは、フォームの送信時にルールを追加することです。

そして、これが私がテストした私のソリューションで、うまくいきます：

<script type="text/javascript">
   $(document).ready(function() {
        var numberIncr = 1; // used to increment the name for the inputs

        function addInput() {
            $('#inputs').append($('<input class="comment" name="name'+numberIncr+'" />'));
            numberIncr++;
        }

        $('form.commentForm').on('submit', function(event) {

            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true
                    })
            });            

            // prevent default submit action         
            event.preventDefault();

            // test if form is valid 
            if($('form.commentForm').validate().form()) {
                console.log("validates");
            } else {
                console.log("does not validate");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();

   });


</script>

そしてhtmlフォーム部分：

<form class="commentForm" method="get" action="">
    <div>

        <p id="inputs">    
            <input class="comment" name="name0" />
        </p>

    <input class="submit" type="submit" value="Submit" />
    <input type="button" value="add" id="addInput" />

    </div>
</form>

幸運を！それがあなたに合っているなら、答えを承認してください！

于 2012-07-18T11:15:28.793 に答える
47

新しいフィールドを追加した後、フォームの検証をリセットします。

function resetFormValidator(formId) {
    $(formId).removeData('validator');
    $(formId).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(formId);
}
于 2015-11-04T17:12:24.063 に答える
4

属性名が欠落しているため、投稿された 1 つの mahesh は機能していません。

だから代わりに

<input id="list" class="required"  />

以下を使用できます。

<input id="list" name="list" class="required"  />

修正版

于 2014-03-29T20:53:33.143 に答える
1

@RitchieD の応答に関しては、jQuery を使用している場合に作業を容易にする jQuery プラグイン バージョンを次に示します。

(function ($) {

    $.fn.initValidation = function () {

        $(this).removeData("validator");
        $(this).removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse(this);

        return this;
    };

}(jQuery));

これは次のように使用できます。

$("#SomeForm").initValidation();
于 2016-06-02T16:56:18.573 に答える
0

入力配列を使用してみてください:

<form action="try.php" method="post">
    <div id="events_wrapper">
        <div id="sub_events">
            <input type="text" name="firstname[]" />                                       
        </div>
    </div>
    <input type="button" id="add_another_event" name="add_another_event" value="Add Another" />
    <input type="submit" name="submit" value="submit" />
</form>

このスクリプトとjQueryを追加し、 foreach() を使用して $_POST されているデータを取得します。

<script>                                                                                    
    $(document).ready(function(){
        $("#add_another_event").click(function(){
        var $address = $('#sub_events');
        var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
        var newNum = num + 1;
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each (function (i) {
            this.id = 'input' + (newNum*5 + i);
        });

        newElem.find('input').each (function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }

        $('#btnDel').removeAttr('disabled');
        });

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

        });

    });
</script>
于 2013-06-10T01:16:11.350 に答える