У меня есть форма, в которой у меня есть addmore
функциональность. При нажатии на addmore набор полей ввода html добавляется в форму, и если пользователь хочет удалить добавленную строку, он / она может сделать это тоже. Все работает нормально, но возникает проблема, заключающаяся в том, что после удаления добавленного html проверки все еще работают для добавленных полей.
я использую ValidaionsJs с начальной загрузкой для проверки.
Ниже ошибка, которую я получаю
Ошибка типа: $ message не определено
$ allErrors = $ message.find (‘.’ + this.options.err.clazz.split (‘
‘) .join (‘. ‘) + …
var $parent = $field.closest(row),
$message = $field.data(ns + '.messages'),
$allErrors = $message.find('.' + this.options.err.clazz.split(' ').join('.') + '[data-' + ns + '-validator][data-' + ns + '-for="' + field + '"]'),
$errors = validatorName ? $allErrors.filter('[data-' + ns + '-validator="' + validatorName + '"]') : $allErrors,
$icon = $field.data(ns + '.icon'),
// Support backward
container = ('function' === typeof (this.options.fields[field].container || this.options.fields[field].err || this.options.err.container))
? (this.options.fields[field].container || this.options.fields[field].err || this.options.err.container).call(this, $field, this)
: (this.options.fields[field].container || this.options.fields[field].err || this.options.err.container),
isValidField = null;
Вот мой HTML
<fieldset class="col-md-6">
<a href="javascript:void(0)" class="remove-addmore high-education fa fa-trash-o" alt="Remove" title="Remove" onclick="removeAddmore(this)"></a>
<div class="ph10"><legend>Higher Education</legend> </div>
<div class="form-group ph10 mt10">
<label for="">Title</label>
<?php echo $this->Form->input('DoctorEducation.' . $count . '.title', array('placeholder' => 'ex. DM or Diploma', 'label' => false, 'div' => false, 'class' => 'form-control', 'data-fv-notempty-message' => __('notEmpty'))); ?>
</div>
<?php echo $this->Form->input('DoctorEducation.' . $count . '.id');
echo $this->Form->hidden('DoctorEducation.' . $count . '.user_id', array('value' => $userID));
?>
<div class="form-group ph10 mt10">
<?php
$data = array(3);
$GraduationDegries = array();
foreach ($data as $idValue) {
$GraduationDegries[$idValue] = $degreeTypes[$idValue];
}
$degreeTypes = $GraduationDegries;
echo $this->Form->input('DoctorEducation.' . $count . '.degree_type_id', array('empty' => 'Select Course', 'label' => 'Course', 'div' => false, 'class' => 'form-control', 'data-fv-notempty-message' => __('notEmpty'), 'options' => $degreeTypes));
?>
</div>
<div class="form-group ph10 mt10">
<?php echo $this->Form->input('DoctorEducation.' . $count . '.college_hospital', array('label' => 'College / Hospital Name', 'div' => false, 'class' => 'form-control', 'data-fv-notempty-message' => __('notEmpty'))); ?>
</div>
<div class="form-group">
<label for="" class="ph10">Duration</label>
<div class="clearfix">
<div class="col-lg-6">
<div class="input-group year">
<?php echo $this->Form->input('DoctorEducation.' . $count . '.start_date', array('placeholder' => 'Start Year', 'type' => 'text', 'label' => false, 'div' => false, 'class' => 'form-control', 'data-fv-notempty-message' => __('notEmpty'), 'div' => false)); ?>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="input-group year">
<?php echo $this->Form->input('DoctorEducation.' . $count . '.end_date', array('placeholder' => 'End Year', 'div' => false, 'type' => 'text', 'label' => false, 'class' => 'form-control', 'data-fv-notempty-message' => __('notEmpty'), 'div' => false)); ?>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</fieldset>
и вот JS, который я использую для удаления HTML
function removeAddmore(_this) {
// $(_this).closest('fieldset').remove();
var classname = $(_this).attr('class');
if (classname.indexOf("post-education") >= 0) {
console.log($("#higher_edu_count").val());
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
$(_this).closest('fieldset').remove();
} else if (classname.indexOf("past-exprience") >= 0) {
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
$(_this).closest('fieldset').remove();
} else if (classname.indexOf("high-education") >= 0) {
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
$(_this).closest('fieldset').remove();
}
}
Есть ли способ остановить проверки после удаления HTML.
Пожалуйста, дайте мне знать, есть ли что-то, что я должен упомянуть для большего разъяснения
Есть несколько полезных ссылок.
http://formvalidation.io/examples/switching-validators-same-field/
http://formvalidation.io/examples/adding-dynamic-field/
http://formvalidation.io/examples/ignoring-validation/Обновить
Попробуйте следующий код, но безуспешно
function removeAddmore(_this) {
// $(_this).closest('fieldset').remove();
var classname = $(_this).attr('class');
if (classname.indexOf("post-education") >= 0) {
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
// $(_this).closest('fieldset').remove();
$('#education').formValidation('enableFieldValidators', 'data[DoctorEducation][1][title]', false);
$('#education').formValidation('enableFieldValidators', 'data[DoctorEducation][1][degree_type_id]', false);
$('#education').formValidation('enableFieldValidators', 'data[DoctorEducation][1][college_hospital]', false);
$('#education').formValidation('enableFieldValidators', 'data[DoctorEducation][1][start_date]', false);
$('#education').formValidation('enableFieldValidators', 'data[DoctorEducation][1][end_date]', false);
} else if (classname.indexOf("past-exprience") >= 0) {
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
$(_this).closest('fieldset').remove();
} else if (classname.indexOf("high-education") >= 0) {
var val = $("#higher_edu_count").val();
$("#higher_edu_count").val(val - 1);
$(_this).closest('fieldset').remove();
}
}
В большинстве случаев Google Chrome хранит данные в виде файлов cookie, и эти значения дают одинаковый результат, пока они хранятся. Пожалуйста, попробуйте выполнить тестирование в нескольких браузерах или очистите историю и запустите файл.
Я прошёл вашу проблему и попробовал это http://formvalidation.io/examples/adding-dynamic-field/. Это будет полезно. Используйте этот код Javascript
<script>
jQuery(document).ready(function ($) {
$('#education')
// Remove button click handler
.on('click', '.remove-addmore', function () {
var index = $(this).attr('id');
var $row = $(this).parent('fieldset');
$('#education')
.formValidation('removeField', $row.find('[name="data[DoctorEducation][' + index + '][title]"]'))
.formValidation('removeField', $row.find('[name="data[DoctorEducation][' + index + '][degree_type_id]"]'))
.formValidation('removeField', $row.find('[name="data[DoctorEducation][' + index + '][college_hospital]"]'))
.formValidation('removeField', $row.find('[name="data[DoctorEducation][' + index + '][start_date]"]'))
.formValidation('removeField', $row.find('[name="data[DoctorEducation][' + index + '][end_date]"]'));
// Remove element containing the option
$(this).parent('fieldset').remove();
// Remove field
});
});
</script>