javascript - jQuery Validate 不适用于自定义单选按钮

Question

我对表单使用 jQuery Validate 插件。到目前为止，我还没有成功验证我的自定义单选按钮。我已经阅读了很多关于如何解决这个问题的帖子，例如使用 ignore，但这并没有帮助。

这是我的小代码:

HTML

<form id="my-form" name="my-form" method="post">
    <input type="text" name="myText">

    <p></p>

    <input type="radio" id="my-radio-1" name="myRadio">
    <label for="my-radio-1">selection #1</label>
    <input type="radio" id="my-radio-2" name="myRadio">
    <label for="my-radio-2">selection #2</label>

    <p></p>

    <p>
        <input type="submit" id="my-submit">
    </p>

</form>

JS

$('#my-form').validate({
    rules: {
        myText: {
            required: true
        },
        myRadio: {
            required: true
        }
    },
    errorClass: 'error_validate',
    errorPlacement: function (label, element) {
        label.insertAfter(element);
    }
});

带有 CSS 的 JSFIDDLE: https://jsfiddle.net/d0nf4pqf/

有人知道如何启用单选按钮的验证吗？

Answer 1

这个问题很有趣。您正在为单选按钮使用自定义样式，它的工作原理是 CSS 规则隐藏 native input 并改为显示样式化的 CSS 单选按钮。结果，单选输入被隐藏，但 jQuery 验证插件默认忽略隐藏的表单元素。

要修复它，您需要指示插件您也希望对隐藏字段进行验证。为此使用 ignore 选项:

$('#my-form').validate({
    // specify rules
    ignore: [],
    rules: {
        myText: {
            required: true
        },
        myRadio: {
            required: true
        }
    },
    // change name of error class that is assigned to input fields
    errorClass: 'error_validate',
    errorPlacement: function (label, element) {
        // default
        if (element.is(':radio')) {
            label.insertAfter(element.next('label'));       
        }
        else {
            label.insertAfter(element);
        }
    }
});

另请注意，在这种情况下您也需要修复 errorPlacement 函数。您不能在输入后立即附加错误元素，因为(再次由于自定义单选样式)单选检查/取消检查将不起作用(它使用相邻的同级选择器 +)。

演示: https://jsfiddle.net/d0nf4pqf/1/