Question

我正在使用bootstrap，并且我想使用bootstrapValidator验证表单，并且添加了一个按钮来动态创建字段。克隆后一切正常，但是我无法验证动态创建的字段。

下面是我使用的html

  <div class="dayDetails">
                <div class="col-md-12">

                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="multidayHeading">Set 1</h4>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group multicentreDay">
                                <label for="multicentreDay">Day</label>
                                <input type="text" placeholder="Itinerary Day" class="form-control" name="multicentreDay[]" id="multicentreDay1" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group multidayTitle">
                                <label for="itineraryTitle">Title</label>
                                <input type="text" placeholder="Title for the Itinerary" class="form-control" name="itineraryTitle" id="itineraryTitle1" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group multidayHotelName">
                                <label for="hotelName">Hotel Name</label>
                                <input type="text" placeholder="Hotel Name for the Itinerary" class="form-control" name="hotelName" id="hotelName1" />
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group multidayItineraryDescription">
                                <label for="multidayItineraryDescription">Description</label>
                                <textarea placeholder="Description for the Itinerary" class="form-control" name="multidayItineraryDescription" id="multidayItineraryDescription1" rows="4"></textarea>
                            </div>
                        </div>
                    </div>

                </div>

我在这里动态创建字段

    $('#addDay').click(function () {

        var $dayElement = $('.dayDetails').first().clone();
        var dayLength = $('.dayDetails').length + 1;

        $($dayElement).find('.multidayHeading').html("Set " + dayLength);           
        $($dayElement).find('.multicentreDay input').attr("ID", "multicentreDay" + dayLength);
        $($dayElement).find('.multidayTitle input').attr("ID", "itineraryTitle" + dayLength);
        $($dayElement).find('.multidayHotelName input').attr("ID", "hotelName" + dayLength);
        $($dayElement).find('.multidayItineraryDescription textarea').attr("ID", "multidayItineraryDescription" + dayLength);


        $('#multiDayArea').append($dayElement);

    });

这是我使用的验证

 $('#addItineraryDayForm').bootstrapValidator({
        button: {
            selector: '#dealSaveBtn',
            disabled: 'disabled'
        },
        feedbackIcons: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        submitHandler: function (form) {                
            alert("working");
            return false;
        },
        fields: {
            'multicentreDay[]': {

                validators: {
                    notEmpty: {
                        message: 'Deal Title is required'
                    }
                }

            }               
        }
    });

我面临的问题是验证仅适用于第一个字段集，而不能验证动态创建的字段。我正在使用bootstrapValidator。如何解决这个问题。

如何使用bootstrapValidator验证动态字段

0 个答案: