Как проверить динамические поля с помощью bootstrapValidator - PullRequest
Новая
       33

Как проверить динамические поля с помощью bootstrapValidator

2 голосов
/ 21 мая 2019

Я использую 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. Как это исправить.

...