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

jQuery Validate does not work on custom radio buttons

本文关键字：自定义 单选按钮 适用于 不适用 Validate jQuery      更新时间：2023-09-26

我为表单使用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/

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

这个问题很有趣。您正在为单选按钮使用自定义样式，它的工作原理是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函数。您不能在输入后立即追加error元素，因为（再次由于自定义单选样式）然后单选复选框将不起作用（它使用相邻的同级选择器+）。

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

相关文章：