0
Я использую bootstrap ver. 3 вместе с bootstrapValidator ver. 0.5.2 и Datetimepicker ver. 3. Моя проблема в том, что, когда я проверяю 3 даты рядом друг с другом, сообщение об ошибке выше первой даты, а не там, где должно быть. Я знаю, что это связано с тем, что я использую все три элемента управления в одной группе форм, но я не знаю, как это исправить. Я включил снимок экрана и код ниже. На экранном снимке, который я включил, вы можете видеть, что всплывающее окно находится поверх «Дата инцидента», а курсор находится в «Дата подтверждения разрешения».Bootstrap 3 Несколько валидация даты
Заранее благодарен!
HTML
<div class="form-group">
<div class="row">
<div class="col-md-8">
<label class="control-label">Title</label>
<input type="text" class="form-control input-lg" placeholder="*Required" name="txtTitle" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#form1').bootstrapValidator({
container:'popover',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtTitle: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The Title is required and cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of alphabetical and number'
}
}
},
dtpNIncidentDate: {
validators: {
notEmpty: {
message: 'Incident Date is required and cannot be empty'
}
}
},
dtpNDateAssigned: {
validators: {
notEmpty: {
message: 'Date Assigned is required and cannot be empty'
}
}
},
dtpNResolutionDate: {
validators: {
notEmpty: {
message: 'Resolution Date is required and cannot be empty'
}
}
}
}
});
$('#dtpIncidentDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNIncidentDate');
});
$('#dtpDateAssigned')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNDateAssigned');
});
$('#dtpResolutionDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNResolutionDate');
});
});
Просто попробуйте: используйте этот http://jqueryvalidation.org для проверки. Лучше. –