使用jQuery Validation插件时，单选框选中后错误提示未消失

使用jQuery Validation插件的表单，提交空表单时，必填的input、下拉框、单选框都能正确触发验证。但选择下拉框或在input输入值后错误消息会自动消失，单选框选中后错误消息却无法消失。手动尝试隐藏/删除错误消息也不起作用，控制台显示单选框已验证通过且进入了隐藏逻辑，但错误提示仍存在。

单选框HTML代码 #

<div class="form-group row">
    <label class="col-xs-12">Test radio button? <span class="text-danger">*</span></label>
    <div class="col-xs-12 radio rack-rbs">
        <label for="test-yes-rb" class="c-radio" style="margin-right: 2rem">
            <input type="radio" name="Test RB" id="test-yes-rb" value="Yes" data-name="inline-rb" required />
            <span name="Test RB" class="fa fa-check"></span>
            Yes
        </label>
        <label for="test-no-rb" class="c-radio">
            <input type="radio" name="Test RB" id="test-no-rb" value="No" data-name="inline-rb">
            <span name="Test RB" class="fa fa-check"></span>
            No
        </label>
    </div>
</div>

jQuery Validation代码 #

$(document).ready(function () {
        $("form").validate({
            focusInvalid: true,
            errorElement: 'div',
            ignore: '.ignore, :not(:visible)',
            onfocusout: function (element) {
                if (!$(element).hasClass('date-picker-input')) {
                    $(element).valid();
                }
            },
            rules: {
                emailAdd: {
                    emailAdd: 'checkEmail'
                },
                telNo: {
                    telNo: 'checkTelNo'
                }
            },
            messages: {
                    'Test RB': {
                        required: 'Select an option.'
                    }
            },
            errorPlacement: function (error, element) {
                if (element.data('name') === "inline-rb" || element.data('name') === "sep-rb" || element.attr('type') === 'checkbox' || 
                    element.hasClass('date-picker-input') || element.hasClass('js-add-search-input')) {
                        error.appendTo(element.parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            invalidHandler: function () {
                setTimeout(() => {
                    $(this).find(":input.error:first").trigger('focus');
                }, 0)
            }
        })
/*endregion */


///////////////////////
//  CUSTOM METHOD'S  //
///////////////////////
    /*region VALID TELEPHONE NUMBER CHECKER */
        $.validator.addMethod('telNo',
            function(value) {
                return value.match(/0/)
            }, 'Contact number must start with a \'0\'.'
        )
    /*endregion */

    /*region VALID EMAIL ADDRESS CHECKER */
        $.validator.addMethod('emailAdd',
            function (value) {
                if (value) {
                    return value.match(/^([a-zA-Z0-9_.+-/'/])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)
                } else {
                    return true;
                }
            }, 'The email address entered is invalid.'
        )
    /*endregion */
})


// Re-validates form when selecting Radio Button
$('input[type="radio"]').on('change', function() {
    console.log('Selected RB: ', this)
    console.log('Selected RB Name: ', $(this).attr('name'))

    console.log('RB Now Valid: ', $(this).valid())

    console.log('Closest RB Error: ', $(this).closest('div').find('.error').attr('id'))

    $(this).valid();  // <- re-validate this one radio input

    if ($(this).valid()) {
        const errorMsgId = $(this).closest('div').find('.error').attr('id')

        $('#' + errorMsgId).hide() // --> Should Hide the error
        $('#' + errorMsgId).remove() // --> Should remove the error
    }
});

解决方案 #

问题根源 #

单选框属于同组控件（共享相同name属性），jQuery Validation会将整个组视为一个验证单元。单独调用单个单选框的valid()方法时，插件无法同步更新整个组的错误状态，导致错误消息未被自动移除。此外，手动查找错误元素的逻辑可能定位不准，或者插件内部维护了错误元素的引用，手动删除后状态未同步。

修复步骤 #

1. 验证整个表单而非单个单选框
   在单选框change事件中，触发整个表单的验证，让插件自动处理错误消息的显示/隐藏：

   $('input[type="radio"]').on('change', function() {
       $("form").valid();
   });
   

   这种方式会让插件重新校验所有字段，自动移除已通过验证的错误消息，无需手动操作。

2. 修正手动处理错误消息的定位逻辑
   若需手动处理，需准确找到对应单选组的错误容器（即.rack-rbs），直接操作该容器下的错误元素：

   $('input[type="radio"]').on('change', function() {
       const $radioGroup = $(this).closest('.rack-rbs');
       if ($(this).valid()) {
           $radioGroup.find('.error').remove();
           // 同步移除单选框的error类
           $('input[name="Test RB"]').removeClass('error');
       }
   });
   

3. 修复自定义验证方法的语法错误
   原代码中emailAdd方法的正则表达式缺少闭合括号，会导致JS报错影响插件功能，修正后如下：

   $.validator.addMethod('emailAdd',
       function (value) {
           if (value) {
               return value.match(/^([a-zA-Z0-9_.+-/'/])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)
           } else {
               return true;
           }
       }, 'The email address entered is invalid.'
   )
   

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