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规则隐藏了本机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/