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/

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

1 个答案: