Проблема в вашем HTML, узлы вашей .input-группы не всегда имеют одинаковую структуру.В некоторых случаях у вас есть .invalid-feedback сразу после ввода, такой как этот HTML
<div class="form-group">
<label for="serialNo" class="col-form-label"><span class="text-danger">*
</span>Serial No.</label>
<input type="text" class="form-control" id="serialNo" name="serialNo">
<div class="invalid-feedback"></div>
</div>
Для других полей .invalid-feedback не после ввода, а вне .form-group.взгляните
<div class="input-group date" data-date-format="dd-M-yyyy">
<input type="text" class="form-control" id="purchaseDate" name="purchaseDate" />
<span class="input-group-text input-group-append input-group-addon">
<i class="simple-icon-calendar"></i>
</span>
</div>
<div class="invalid-feedback"></div>
Это различие в структуре HTML формы сделало ваши showFieldError () и clearFieldError () не всегда так, как вы ожидали, потому что $(element).next() не перехватывает нужный DOM-узел для вставки/ удалить сообщение проверки.Поэтому в некоторых случаях clearFieldError удаляет неправильный HTML-тег, и это может привести к тому, что ваши выборки исчезнут
function showFieldError(element, message) {
$(element).addClass('is-invalid');
$(element).next().html(message);
$(element).next().show();
}
function clearFieldError(element) {
$(element).removeClass('is-invalid');
$(element).removeAttr('required');
$(element).next().html('');
}
Так что вам нужно исправить свой HTML, чтобы получить одинаковую структуру для всех полей.Поместите <div class="invalid-feedback"></div> всегда чуть ниже поля выбора или ввода.В противном случае вам нужно изменить селектор, который вы передаете функциям showFieldError () и clearFieldError (), в соответствии с вашим HTML
В противном случае простой подход - добавить идентификатор в div с классом .invalid-feedback, идентификатор, которыйвы можете легко управлять по его связанному идентификатору ввода, что-то вроде
<div class="input-group date" data-date-format="dd-M-yyyy">
<input type="text" class="form-control" id="purchaseDate" name="purchaseDate" />
<span class="input-group-text input-group-append input-group-addon">
<i class="simple-icon-calendar"></i>
</span>
</div>
<div id="purchaseDate_err_mex" class="invalid-feedback"></div>
, таким образом вы можете передать имя ввода вашим функциям, и они станут
function showFieldError(input_id, message) {
$('#'+input_id).addClass('is-invalid');
$('#'+ input_id +'_err_mex').html(message).show();
}
function clearFieldError(input_id) {
$('#'+input_id).removeClass('is-invalid');
//$('#'+input_id).removeAttr('required');
/* don't need to remove required attribute from mandatory fields */
$('#'+ input_name +'_err_mex').html('').hide();
}
и функцией проверки
function validateForm() {
var validationStatus = true;
if ($('#selectedCategory').val().length == 0) {
showFieldError('selectedCategory', 'Must not be blank');
if (validationStatus) { $('#selectedCategory').focus() };
validationStatus = false;
}
........
return validationStatus;
}
Вы только проверяете, является ли длина всех полей больше 0, поэтому вы можете проверить всю форму внутри цикла
function validateForm() {
var validationStatus = true;
var form_inputs = $('#manageItemsForm input, #manageItemsForm select')
$.each(form_inputs,function(){
var input_id = $(this).attr('name');
clearFieldError(input_id);
if ($.trim($(this).val()).length == 0 && $(this).is("[required]")) {
showFieldError(input_id, 'Must not be blank');
if (validationStatus) { $('#'+input_id).focus() };
validationStatus = false;
}
});
return validationStatus;
}