我有一个 form，它正在使用 JQuery Validation 插件，但当我提交一个空的 form 时，所需的所有 inputs、dropdowns、radio buttons 都未正确验证通过。

当我为 dropdow 做出选择，或在 input 中输入一个值时，错误信息就会被移除，那么为什么在选择 radio button 时就不起作用呢？

我看到关于这件事已经提出了很多问题，并尝试了许多解决方案，但不知为何我的方法完全不起作用。我甚至试过移除/隐藏错误信息，但那同样也不起作用。

下面给出一个适用于 radio button 的 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>

然后我选择了 radio button，但如你所见它仍然显示。

这是我的 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
    }
});

这是 console.log 的输出

如你所见，当我重新评估所选的 radio button 时，它会返回为 true，并落入我的 IF，但它并不会被隐藏或移除。

class 现在显示为 'Valid'

解决方案

三个问题：

1. name="Test RB" 有一个空格。 这会破坏生成的错误元素在jQuery的 ID选择器中的匹配。请改为 name="TestRB"（并将你的 messages 键改为匹配的值）。
2. 你的变更处理程序在 $(document).ready() 外部。 将它移到内部，放在 .validate() 之后。
3. 移除手动的 hide()/remove()。 调用 .valid() 本身就会清除错误。你的手动移除会与之冲突。

最终处理程序（位于 document.ready 内）：

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

这就是你需要的一切。