Bootstrap4 Validation表单验证错误时输入框样式未生效问题求助

• 事件绑定逻辑错误：你将表单submit事件的绑定逻辑嵌套在提交按钮的click事件判断分支中，只有第一次点击按钮且前端原生校验通过时，才会完成submit事件绑定，首次提交不会触发AJAX校验逻辑，且多次点击会重复绑定submit事件，导致重复提交。
• 样式优先级冲突：Bootstrap的.was-validated类下，输入框的:valid伪类默认样式优先级高于手动添加的.is-invalid类，因此即使你根据服务端返回结果给输入框加了is-invalid，也会被原生校验的成功样式覆盖，看不到错误边框。
• 额外语法错误：你当前AJAX配置的url参数url:"/validation'); ?>"存在语法拼接错误，需要修正为正确的后端接口地址。

直接替换你原来的JS代码即可：

<script type="text/javascript">
// 直接绑定表单提交事件，不要嵌套在click事件里
$("#registration").on('submit', function(event){
    event.preventDefault();
    var form = $(this);
    // 先执行前端原生校验
    if (form[0].checkValidity() === false) {
        event.stopPropagation();
        form.addClass('was-validated');
        return;
    }
    // 前端校验通过，执行AJAX服务端校验
    $.ajax({
        // 修正这里的url为你的实际接口地址
        url:"/validation",
        method:"POST",
        data:$(this).serialize(),
        dataType:"json",
        beforeSend:function(){
            $('#createaccount').attr('disabled', 'disabled');
            // 先移除was-validated类，避免样式覆盖
            form.removeClass('was-validated');
            // 清空之前的校验状态
            $('.form-control, .form-check-input').removeClass('is-valid is-invalid');
            $('.invalid-feedback').html('');
            $('#success_message').html('');
        },
        success:function(data)
        {
            if(data.error)
            {
                //USERNAME
                if(data.username_error != '')
                {
                    $('#username_error').html(data.username_error);
                    $("#username").addClass('is-invalid');
                }
                else
                {
                    $("#username").addClass('is-valid');
                }

                //EMAIL
                if(data.email_error != '')
                {
                    $('#email_error').html(data.email_error);
                    $("#email").addClass('is-invalid');
                }
                else
                {
                    $("#email").addClass('is-valid');
                }

                //PASSWORD
                if(data.password_error != '')
                {
                    $('#password_error').html(data.password_error);
                    $("#password").addClass('is-invalid');
                }
                else
                {
                    $("#password").addClass('is-valid');
                }

                //CONFIRMPASSWORD
                if(data.confirmPassword_error != '')
                {
                    $('#confirmPassword_error').html(data.confirmPassword_error);
                    $("#confirmPassword").addClass('is-invalid');
                }
                else
                {
                    $("#confirmPassword").addClass('is-valid');
                }

                //PIN
                if(data.pin_error != '')
                {
                    $('#pin_error').html(data.pin_error);
                    $("#pin").addClass('is-invalid');
                }
                else
                {
                    $("#pin").addClass('is-valid');
                }

                //CAPCHA
                if(data.g_recaptcha_response != '')
                {
                    $('#g_recaptcha_response').html(data.g_recaptcha_response);
                }

                //TOS
                if(data.invalidCheck_error != '')
                {
                    $('#invalidCheck_error').html('You must agree before submitting.');
                    $("#invalidCheck").addClass('is-invalid');
                }
                else
                {
                    $("#invalidCheck").addClass('is-valid');
                }
            }
            if(data.success)
            {
                $('#success_message').html(data.success);
                $('#registration')[0].reset();
            }
            $('#createaccount').attr('disabled', false);
        }
    })
});
</script>

• 移除了嵌套的事件绑定逻辑，直接绑定表单的submit事件，避免重复绑定和首次提交不生效的问题
• 在AJAX请求发送前先移除表单的was-validated类，同时清空之前的校验状态，避免样式优先级冲突
• 简化了类名操作逻辑，无需重复执行removeClass，因为beforeSend阶段已经统一清空了状态
• 修正了url参数的语法错误，你可以根据自己的实际后端接口地址调整即可

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