如何阻止jQuery Validate表单错误信息重复显示？

看起来你遇到了jQuery Validate插件处理remote验证时的小困扰——输入错误验证码后，按退格键会重复弹出错误提示，导致信息叠加。这是因为插件默认会在keyup事件触发验证，每次退格都会发起一次remote请求，若请求返回错误，就会重复添加错误信息。

下面给你几个实用的解决方案：

方案一：调整验证触发时机，减少不必要的remote请求 #

你可以自定义onkeyup选项，让remote验证只在字段失去焦点（blur）或表单提交时触发，而不是每次按键都发起请求。这样退格操作就不会重复触发错误提示了：

$('#code_form').validate({
    // 初始化插件
    rules: {
        sms_code: {
            required: true,
            remote: {
                url: "ajaxfiles/code_check.php",
                type: "post"
            }
        }
    },
    messages: {
        sms_code: {
            required: 'Please enter code from sms code',
            remote: "Invalid code..."
        }
    },
    // 自定义keyup验证逻辑：仅保留required规则的实时验证
    onkeyup: function(element) {
        $(element).valid('required');
    }
});

方案二：确保同一字段的错误信息唯一 #

通过自定义errorPlacement函数，在添加新错误信息前先移除该字段已有的错误提示，避免重复叠加：

$('#code_form').validate({
    rules: {
        sms_code: {
            required: true,
            remote: {
                url: "ajaxfiles/code_check.php",
                type: "post"
            }
        }
    },
    messages: {
        sms_code: {
            required: 'Please enter code from sms code',
            remote: "Invalid code..."
        }
    },
    errorPlacement: function(error, element) {
        // 先移除该字段已存在的错误信息
        element.siblings('.error').remove();
        // 再插入新的错误提示
        error.insertAfter(element);
    }
});

方案三：在remote请求回调中手动控制错误信息 #

你也可以在remote的配置里添加success回调，手动处理错误信息的显示逻辑，确保不会重复创建：

$('#code_form').validate({
    rules: {
        sms_code: {
            required: true,
            remote: {
                url: "ajaxfiles/code_check.php",
                type: "post",
                success: function(response) {
                    var $element = $('#sms_code');
                    var $error = $element.siblings('.error');
                    if (!response) {
                        // 验证失败：仅在没有错误提示时添加
                        if ($error.length === 0) {
                            $('<label class="error">Invalid code...</label>').insertAfter($element);
                        }
                    } else {
                        // 验证成功：移除已有的错误提示
                        $error.remove();
                    }
                }
            }
        }
    },
    messages: {
        sms_code: {
            required: 'Please enter code from sms code'
        }
    }
});

我个人更推荐方案一，它从根源上减少了不必要的remote请求，同时保留了必填项的实时验证体验，用户感受会更顺畅。

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