Bootstrap validator error

I am trying to add dynamic fields to bootstrap validator like:

var $option   = $education_block.find('[name="education[start][]"], [name="education[end][]"]');

            // Add new field
            $option.each(function (i, e) {
                $doctor_modal_form.bootstrapValidator('addField', $(e));
            });

$doctor_modal_form.bootstrapValidator({
fields: {
'education[start][]': {
                validators: {
                    date: {
                        format: 'DD.MM.YYYY',
                        message: 'Неверная дата начала обучения.'
                    }
                }
            },
            'education[end][]': {
                validators: {
                    date: {
                        format: 'DD.MM.YYYY',
                        message: 'Неверная дата окончания обучения.'
                    }
                }
            }
        }
    })

and receive error while input date in this fields:

Uncaught TypeError: Cannot read property 'find' of undefined
at b.isValidContainer (bootstrapValidator.min.js:11)
at b.updateStatus (bootstrapValidator.min.js:11)
at b.validateField (bootstrapValidator.min.js:11)
at HTMLInputElement.<anonymous> (bootstrapValidator.min.js:11)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.r.handle (jquery.min.js:3)
isValidContainer    @   bootstrapValidator.min.js:11
updateStatus    @   bootstrapValidator.min.js:11
validateField   @   bootstrapValidator.min.js:11
(anonymous) @   bootstrapValidator.min.js:11
dispatch    @   jquery.min.js:3
r.handle    @   jquery.min.js:3

g.data("bv.messages").find('.help-block[data-bv-validator][data-bv-for="'+f+'"]')

Can you tell me what is wrong? What option and where I have to add?

<div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-2 control-label"><span>Начало</span></label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <input name="education[start][]" type="date" class="form-control"
                           data-bv-field="education[start][]" value="<%-start%>">
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="col-sm-2 control-label"><span>Конец</span></label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <input name="education[end][]" type="date" class="form-control"
                           data-bv-field="education[end][]" value="<%-end%>">
                </div>
            </div>
        </div>
    </div>

it education block declaration for closing all questions. In JS I take it very symply.

Upvotes: 0

Views: 1427

Answers (1)

goat tie-
goat tie-

Reputation: 276

my solution:

if ($f.data('bv.messages')) {
   if ($f.data('bv.messages')  <-- insert line to check
        .find('.help-block[data-bv-validator][data-bv-for="' + field + '"]')
        .filter('[data-bv-result="' + this.STATUS_INVALID + '"]')
        .length > 0) {
        return false;
    }
}

Upvotes: 0

Related Questions