Question

我有一个带有动态输入字段数的表单：用户可以添加新项目，当他完成后，他可以发送表单。表单使用FormValidation（formValidation.io）在发送之前检查内容，以便更容易填写所有正确的数据。

问题是：只检查第一个字段（加载页面时已经存在的字段），FormValidation将跳过所有其他字段。

我在添加新字段时尝试再次调用FormValidation，但它没有任何区别。我尝试仅在添加新字段时调用FormValidation，并且它仅在第一次工作，包括前两个字段，但跳过后面添加的任何字段。看起来FormValidation只能被调用一次，并且只考虑当时存在的内容。

每次添加新字段时，您是否可以设法让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>

Answer 1

我遇到了类似的问题，然后我发现新的元素没有被添加到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();
    });
})

Answer 2

好吧，它出来了我没有仔细阅读FormValidation文档，它们实际上运行得很好并且考虑过这个实例。

有关工作示例，请参阅http://formvalidation.io/examples/adding-dynamic-field/。

如何以动态形式使用表单验证？

2 个答案: