javascript - jquery 单选按钮的验证规则

Question

    $('#myform').validate({
    // other options & rules
});

我正在使用这些规则使用字段名称来验证 myform 的各个字段。现在我还有几个单选按钮，我需要对其应用验证规则:“至少需要选择一个单选按钮”。另外我需要提到这个 .Myform 是流的表单和stream_details的嵌套表单，因为我的关联就像这样 Stream has_many StreamDetail。单选按钮属于嵌套表单。这里的问题是我在检查元素上获得的单选按钮的名称很奇怪，例如“stream[stream_details_attributes][0][show_details][0]”。无法了解如何对此应用验证。我虽然尝试在按钮上放置一个类并在其上添加规则。但没用。

Answer 1

有几种方法可以做到这一点。你的操作很难判断，但也许 #3 就是你需要的......

<小时/><小时/>

1.当组中每个电台的名称相同时...

    <input type="radio" name="radioname" /> <label>Yes</label>
    <input type="radio" name="radioname" /> <label>No</label>
    <input type="radio" name="radioname" /> <label>Maybe</label>

然后，您可以简单地声明此名称的 required 规则，并且需要该组中的一个 radio 。 (由于它是共享 name(同一组)的 type="radio"，因此一开始只能选择一个。)

$('#myform').validate({
    // other options,
    rules: {
        radioname: { // <- NAME of every radio in the same group
            required: true
        }
    }
});

<小时/><小时/>

2.当组中每个电台的名称不同时...

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后您可以使用 the plugin's additional-methods.js file 中的 require_from_group 规则。第一个参数告诉它需要组中的多少个。

$('#myform').validate({
    // other options,
    rules: {
        foo: {
            require_from_group: [1, '.mygroup']
        },
        bar: {
            require_from_group: [1, '.mygroup']
        },
        foobar: {
            require_from_group: [1, '.mygroup']
        }
    }
});

<小时/><小时/>

3. 当组中每个电台的名称不同并且您不知道名称时> 属性(尽管每个名称仍然是强制性的)。

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后您可以使用 .rules('add') 方法声明规则。此方法可以附加到任何选择器，因此您不需要知道name属性。 (但是，即使您在这里没有使用 name，插件强制考虑验证的每个输入都包含一个 name .)

$('#myform').validate({
    // other options
});

$('.mygroup').each(function () {
    $(this).rules('add', {
        require_from_group: [1, $(this)]
    });
});

工作演示:http://jsfiddle.net/05qm3r4m/

您可以使用the groups option在 .validate() 中将错误消息合并为一条消息。然后使用the errorPlacement option将其精确地放置在您的布局中。

包含组合消息的演示:http://jsfiddle.net/05qm3r4m/1/