验证 JS 错误消息在 select2 下拉列表中的 Bootstrap 模式上不清楚

问题描述

验证不适用于 Bootstrap 模型，不允许提交按钮，并且在从下拉列表中选择值并提交表单后错误消息也不清楚。附上模型图片供参考。

这里是通用验证函数。对 resetControls 函数进行了更改，但它不起作用。

'use strict';
$(document).ready(function () {

validate.extend(validate.validators.datetime,{

    parse: function(value,options) {

        return +moment.utc(value);
    },// Input is a unix timestamp
    format: function(value,options) {

        var format = options.dateOnly ? "DD/MM/YYYY" : "DD/MM/YYYY";
        return moment.utc(value).format(format);
    }
});


var adminTeachertiMetableConstraints = {
    teacherDropdown: {
        presence: true,},studentDropdown:{
        presence: true,bookedDateDropdown:{
        presence: true,};

// Hook up the form so we can prevent it from being posted
var form = document.querySelector("form#rescheduleBooking");
form.addEventListener("submit",function(ev) {
    ev.preventDefault();
    handleFormSubmit(form);
});

// Hook up the inputs to validate on the fly
var inputs = document.querySelectorAll("input,textarea,select");
for (var i = 0; i < inputs.length; ++i) {
    inputs.item(i).addEventListener("change",function(ev) {
        resetControls(inputs);
        var errors = validate(form,adminTeachertiMetableConstraints) || {};
        generateMessage(errors,this);
    });
}

function handleFormSubmit(form,input) {
    var errors = validate(form,adminTeachertiMetableConstraints);
    if(typeof(errors)  === 'undefined'){
        $(form).trigger('submit');
    }
    generateMessage(errors,input);
}

function generateMessage(errors,input){
    $.each(errors,function(input,error){
        $.each(error,function(index,msg){
            addError(input,msg);
        });
    });
}


function addError(input,error) {
    var block = document.createElement("p");
    block.classList.add("text-danger");
    block.classList.add("error");
    block.innerText = error;
    $("#"+input).nextAll("span.messages:last-child").html(block);
}

function resetControls(inputs){
    $.each(inputs,input){
        $(input).nextAll("span.messages:last-child").html("");
    });
}
});

我该如何解决。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-modal bootstrapvalidator