1

入力フィールドの数が動的なフォームがあります。ユーザーは新しいアイテムを追加でき、終了したらフォームを送信できます。フォームは FormValidation (formValidation.io) を使用して送信前にコンテンツをチェックし、すべての適切なデータを簡単に入力できるようにします。

問題は、最初のフィールド (ページがロードされたときに既に存在するフィールド) のみがチェックされ、他のすべてのフィールドは FormValidation によってスキップされることです。

新しいフィールドを追加するときに FormValidation を再度呼び出してみましたが、違いはありません。新しいフィールドを追加するときにのみ FormValidation を呼び出してみましたが、最初の 2 つのフィールドを含めて初めて機能しますが、後で追加されたフィールドはスキップされます。FormValidation は 1 回しか呼び出せないように見え、その時点で存在するものだけが考慮されます。

新しいフィールドが追加されるたびに、フォーム全体に対して FormValidation を機能させる方法を考案できますか?

これは、新しい入力フィールドを追加するコードです。

<script>

    // add input filed to form
    $(document).ready(function () {
        //when the AddBox button is clicked
        $(".add").click(function (e) {
            var randomnumber=Math.floor(Math.random()*999999);
            //Append a new row of code to the "#items" div
            var newrow='';
            newrow+='<div class="item">';
            newrow+='<div class="form-group">';
            newrow+='<button type="button" class="btn btn-default delete" >remove</button> ';
            newrow+='<label class="sr-only" for="boxname">boxname</label>';
            newrow+='<input type="text" class="form-control" id="boxname_'+randomnumber+'" name="boxname[]" placeholder="boxname"';
            newrow+='   data-fv-notempty="true"';
            newrow+='   data-fv-notempty-message="The boxname is required"';
            newrow+='   >';
            newrow+='</div> ';
            newrow+='</div>';
            $("#items").append(newrow);
            $("#formbox").formValidation(); // call formvalidation again but field is not checked
        });

        //when the remove button is clicked
        $("body").on("click", ".delete", function (e) {
            $(this).parent("div").remove();
        });
    })

    // call formvalidation 
    $(document).ready(function() {
        $('#formbox').formValidation();
    });

</script>

これはhtmlです：

<form 
    id="formbox" 
    class="form-inline" 
    action="index.php" 
    method="post"
        data-fv-framework="bootstrap"
        data-fv-icon-valid="glyphicon glyphicon-ok"
        data-fv-icon-invalid="glyphicon glyphicon-remove"
        data-fv-icon-validating="glyphicon glyphicon-refresh"
        data-fv-err-container="tooltip"
    >
<div id="items">
<div class="item">
    <div class="form-group">
    <button type="button" class="btn btn-default delete" >remove</button>
    <label class="sr-only" for="boxname">boxname</label>
    <input type="text" class="form-control" id="boxname_1" name="boxname[]" placeholder="box 1" value="box 1"
            data-fv-notempty="true"
            data-fv-notempty-message="The boxname is required"
            >
    </div>
</div>
</div>
<br>    
<div class="btn-group" role="group" aria-label="...">
 <button type="button" class="btn btn-default add">add box</button>
 <button type="submit" class="btn btn-default">send</button>
</div>

</form>
4

2 に答える 2

0

私は同様の問題に直面しましたが、新しい要素が DOM に追加されていないことがわかりました。そのため、それらは永続的ではありませんでした。この問題を克服するために、createElement を使用しました。変更したコードは次のとおりです。

// add input filed to form
$(document).ready(function () {
    //when the AddBox button is clicked
    $(".add").click(function (e) {
        var randomnumber=Math.floor(Math.random()*999999);
        //Append a new row of code to the "#items" div

        var div_item = document.createElement("div");
        div_item.class = "item";

        var div_form_group = document.createElement("div");
        div_form_group.class = "form-group";

        div_item.appendChild( div_form_group );

        var button = document.createElement("button");
        button.class = "btn btn-default delete"

        div_form_group.appendChild( button );

        var label = document.createElement("label");
        label.class = "sr-only";
        label.for = "boxname";

        button.appendChild( label );

        var input = document.createElement("input");
        input.type = "text";
        input.class = "form-control";
        input.id    = "boxname_" + randomnumber;
        input.name  = "boxname[]";
        input.placeholder = "boxname";
        input.setAttribute("data-fv-notempty", "true");
        input.setAttribute("data-fv-notempty-message","The boxname is required");

        label.appendChild( input );

        $("#items").append(div_item);
        });

    //when the remove button is clicked
    $("body").on("click", ".delete", function (e) {
        $(this).parent("div").remove();
    });
})
于 2015-02-11T13:10:40.393 に答える
0

FormValidation のドキュメントを注意深く読んでいなかったことがわかりました。実際には非常にうまく機能し、このインスタンスについて考えていました。

実際の例については、 http://formvalidation.io/examples/adding-dynamic-field/を参照してください。

于 2015-02-11T15:08:44.120 に答える