表单提交验证失败时才高亮文本框红色边框的问题咨询

在新增与编辑表单中，期望点击提交按钮后，仅当文本框验证失败时才将其边框高亮为红色。为此在.css文件中添加了如下代码：

input:not([type]):invalid,
input:not(.browser-default):invalid,
input[type=text]:not(.browser-default):invalid,
input[type=number]:not(.browser-default):invalid,
input[type=search]:not(.browser-default):invalid,
textarea.materialize-textarea:invalid,
textarea:invalid,
.select-wrapper > input.select-dropdown:invalid {
    box-shadow: 0 1px 0 0 red;
}

但当前存在问题：每次打开表单时，文本框边框就会被高亮为红色。已编写的提交按钮点击事件代码如下：

$(".SubmitKpi").click(function () {    
var SourceIdString = '';    
$('#KPName span#KR_KP_NAME-error').text("")
if (!$('#Addform').valid()) {
        if (((!$('.box1').valid()) || (!$('.box2').valid()) || (!$('.box3').valid()) || (!$('.box5').valid()))) {
            $('#box1-error').hide()
            $('#box2-error').hide()
            $('#box3-error').hide()
            $('#box5-error').hide()
            if (!$('.box1').valid())
                $('#box1-error').show()
            else if (!$('.box2').valid())
                $('#box2-error').show()
            else if (!$('.box3').valid())
                $('#box3-error').show()
            else
                $('#box5-error').show()
        }
    }
    else if ($('#Addform').valid()) {
        if ($("#PI_DATA_SOURCE_NAME .tag-sel-item").length != 0) {
            //...
        }
        else {
            $("SourceDiv .error").text("This field is required.");
        }
    }    
    return false
})

请问需在提交按钮点击事件及document.ready()函数中做哪些修改，才能实现仅在验证失败时显示红色边框？

解决方案 #

1. 先调整CSS规则（核心前提） #

原生:invalid伪类会在页面加载时自动对必填字段生效，导致初始状态就变红。需要给CSS增加一个自定义类作为触发开关，修改后的CSS：

/* 只有当表单拥有validation-failed类时，才触发红色边框 */
.validation-failed input:not([type]):invalid,
.validation-failed input:not(.browser-default):invalid,
.validation-failed input[type=text]:not(.browser-default):invalid,
.validation-failed input[type=number]:not(.browser-default):invalid,
.validation-failed input[type=search]:not(.browser-default):invalid,
.validation-failed textarea.materialize-textarea:invalid,
.validation-failed textarea:invalid,
.validation-failed .select-wrapper > input.select-dropdown:invalid {
    box-shadow: 0 1px 0 0 red;
}

2. document.ready()中的修改 #

页面加载时重置表单验证状态，避免初始就触发错误样式：

$(document).ready(function() {
    // 初始移除验证失败类，确保页面打开时无红色边框
    $('#Addform').removeClass('validation-failed');
    
    // 重置表单验证状态（针对编辑表单回显数据的场景，避免误触发）
    if ($('#Addform').validate) {
        $('#Addform').validate().resetForm();
    }
});

3. 提交按钮点击事件的修改 #

在提交逻辑中根据验证结果，动态添加/移除自定义类来控制红色边框的显示：

$(".SubmitKpi").click(function () {    
    var SourceIdString = '';    
    $('#KPName span#KR_KP_NAME-error').text("");
    
    // 先重置验证状态，清除之前的红色边框
    $('#Addform').removeClass('validation-failed');
    
    if (!$('#Addform').valid()) {
        // 表单验证失败，添加类触发红色边框
        $('#Addform').addClass('validation-failed');
        
        if (((!$('.box1').valid()) || (!$('.box2').valid()) || (!$('.box3').valid()) || (!$('.box5').valid()))) {
            $('#box1-error, #box2-error, #box3-error, #box5-error').hide();
            if (!$('.box1').valid())
                $('#box1-error').show()
            else if (!$('.box2').valid())
                $('#box2-error').show()
            else if (!$('.box3').valid())
                $('#box3-error').show()
            else
                $('#box5-error').show()
        }
    }
    else {
        if ($("#PI_DATA_SOURCE_NAME .tag-sel-item").length != 0) {
            //... 原有提交逻辑
        }
        else {
            $("SourceDiv .error").text("This field is required.");
            // 数据源为空也算验证失败，同样触发红色边框
            $('#Addform').addClass('validation-failed');
        }
    }    
    return false;
})

关键逻辑说明 #

• 用自定义类validation-failed控制错误样式的生效时机，彻底规避原生:invalid的初始触发问题
• 每次提交前先重置状态，避免上次验证的错误样式残留
• 所有验证失败的场景（包括表单整体验证、单独字段验证、自定义校验）都要添加validation-failed类，确保红色边框同步触发

内容的提问来源于stack exchange，提问作者user18048414