Javascript 选择字段上的Bootstrap 4验证中的问题

我不熟悉jQuery和Bootstrap，我使用jQuery和Bootstrap 4来验证我的表单模式，每当出现错误时，它必须在相应的字段下面显示错误，但在我的情况下，选择字段被错误覆盖，选择字段消失，但对输入字段来说效果良好

这里有一个看，如果你想有一个近距离的形象，只需点击它

正如您所看到的，select字段被FIELDRERROR覆盖，但对于input字段来说没有问题

以下是我的jQuery验证代码：

$(function(){
    setCategorySelect();

    $(document).on('shown.bs.modal','#manageItemsModal', function () {
        $('#manageItemsModal #btnSubmit').on('click', function(){
            if (validateForm()) {
                messageSuccess("Very well");
            } else {
                messageError("Oops!!");
            }
        });
    });
});

function validateForm() {
    var validationStatus = true;

    if ($('#manageItemsForm #selectedCategory').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedCategory'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedCategory').focus() };
        validationStatus = false;
    }

    if ($('#manageItemsForm #selectedBrandModel').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedBrandModel'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedBrandModel').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #serialNo').val().length == 0) {
        showFieldError(('#manageItemsForm #serialNo'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #serialNo').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #selectedVendor').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedVendor'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedVendor').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #selectedBranch').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedBranch'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedBranch').focus() };
        validationStatus = false;       
    }   

    return validationStatus;    
}

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('');
}

function setCategorySelect() {
    var $categorySelect = $('#manageItemsForm #selectedCategory').selectize({
        selectOnTab: true,
        closeAfterSelect: true,
        persist: false,
        create: false,
        valueField: 'id',
        labelField: 'text',
        options: [],
        preload: true,
        onInitialize : function() {
            var self = this;
            $.ajax({
                url: '/assetCategory/search',
                type: 'POST',
                dataType: 'json',
                data: {
                    searchText: '*'
                },                  
                error: function() {
                    callback();
                },
                success: function(res) {
                    self.addOption(res.data);
                }
            });
        },
        load: function(query, callback) {
            if (query.length <= 2) return callback();
            $.ajax({
                url: '/assetCategory/search',
                type: 'POST',
                dataType: 'json',
                data: {
                    searchText: query + "*"
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    console.log(res.data);
                    callback(res.data);
                    $categorySelect.refreshItems();
                },
                fail : function() {
                    callback();
                }
            });   
        }
    });         
}

$（函数（）{
setCategorySelect（）；
$（document）.on（'show.bs.modal'，'manageItemsModel'，函数（）{
$（“#manageItemsModal#btnSubmit”）。在（'click'，function（）上{
if（validateForm（））{
信息成功（“非常好”）；
}否则{
messageError（“Oops！！”）；
}
});
});
});
函数validateForm（）{
var validationStatus=true；
if（$（'#manageItemsForm#selectedCategory'）.val（）.length==0）{
showFieldError（“#manageItemsForm#selectedCategory”），“不得为空”）；
if（validationStatus）{$（'#manageItemsForm#selectedCategory'）.focus（）}；
validationStatus=false；
}
if（$（'#manageItemsForm#selectedBrandModel'）.val（）.length==0）{
showFieldError（“#manageItemsForm#selectedBrandModel”），“不得为空”）；
if（validationStatus）{$（'#manageItemsForm#selectedBrandModel'）.focus（）}；
validationStatus=false；
}
if（$（'#manageItemsForm#serialNo'）.val（）.length==0）{
showFieldError（“#manageItemsForm#serialNo”），“不得为空”）；
if（validationStatus）{$（'#manageItemsForm#serialNo'）.focus（）}；
validationStatus=false；
}
if（$（'#manageItemsForm#selectedVendor'）.val（）.length==0）{
showFieldError（“#manageItemsForm#selectedVendor”），“不得为空”）；
if（validationStatus）{$（'#manageItemsForm#selectedVendor'）.focus（）}；
validationStatus=false；
}
if（$（'#manageItemsForm#selectedBranch'）.val（）.length==0）{
showFieldError（“#manageItemsForm#selectedBranch”），“不得为空”）；
if（validationStatus）{$（'#manageItemsForm#selectedBranch'）.focus（）}；
validationStatus=false；
}   
返回验证状态；
}
函数showFieldError（元素、消息）{
$（元素）.addClass（'is-invalid'）；
$（元素）.next（）.html（消息）；
$（元素）.next（）.show（）；
}
函数clearFieldError（元素）{
$（元素）.removeClass（'is-invalid'）；
$（元素）.removeAttr（'required'）；
$（元素）.next（）.html（“”）；
}
函数setCategorySelect（）{
var$categorySelect=$（“#manageItemsForm#selectedCategory”）。选择({
selectOnTab：对，
对,，
坚持：错，
创建：false，
valueField:'id'，
labelField:“文本”，
选项：[]，
预加载：正确，
初始化：函数（）{
var self=这个；
$.ajax({
url:“/assetCategory/search”，
键入：“POST”，
数据类型：“json”，
数据：{
searchText:“*”
},                  
错误：函数（）{
回调（）；
},
成功：功能（res）{
self.addOption（res.data）；
}
});
},
加载：函数（查询、回调）{
if（query.length我看不到工作代码，因为您使用了一些外部引用，如selectize

我建议您习惯使用“代码片段”来提供代码

顺便说一句，您的问题似乎只是样式。我不知道，但我打赌您只需要为

.select::after.error {
color:red;
}

您可以检查和复制CSS代码。
问题出在您的HTML中，.input组的节点并非始终具有相同的结构。在某些情况下，您在输入（如此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>

因此，您必须修复HTML以获得所有字段的相同结构。将
始终放在选择或输入字段的正下方。否则，您必须根据HTML更改传递给showFieldError（）和clearFieldError（）函数的选择器

否则，一种简单的方法是向带有class.invalid feedback的divs添加一个ID，您可以通过他的相关输入ID轻松管理该ID，例如

<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 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;    
    }

showFieldError（）函数在何处以及如何定义？表单上的
保存
按钮正在调用
验证表单
@Sim1-81您能提供工作示例吗？理解起来会更清楚。@java用户我询问函数showFieldError（）的定义，不知道验证表单（）在何处它被触发了。@Sim1-81我已经更新了jquery，请看一看。我感谢您的帮助，但这里的问题是整个选择字段和它的选项都消失了
<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;    
}

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;    
    }