jQuery 验证，单选按钮组，嵌套问题答案

【问题标题】：jQuery validate, radio button group, nesting issuejQuery 验证，单选按钮组，嵌套问题
【发布时间】：2014-01-29 19:00:14
【问题描述】：

我正在尝试添加一个自定义方法来验证一组单选按钮，使用 v1.9 的 jQuery 验证插件。

与this post相反，单选按钮输入可能具有相同的名称属性，只要任何类规则仅适用于其中一个输入。 jQuery validate 然后将您的输入组视为单个输入。

当您的输入是共同父母的孩子时，这有效，即

<input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
<input type="radio" name="radiogroup" value="2">
<input type="radio" name="radiogroup" value="3">
<input type="radio" name="radiogroup" value="4">

但是一旦html结构发生变化，验证规则就不适用了：

<div class="form-row">  
    <input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
</div>

<div class="form-row">          
    <input type="radio" name="radiogroup" value="2">
</div>

<div class="form-row">              
    <input type="radio" name="radiogroup" value="3">
</div>              

<div class="form-row">
    <input type="radio" name="radiogroup" value="4">        
</div>

有人知道这个问题的解决方法吗？添加类规则如下：

$.validator.addClassRules({
    "input-shipping" : {
        required: true,
        dateselected: true
    }
});

$.validator.addMethod("dateselected", function(value, element) {
    console.log(element);
});

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

没有调用验证规则的原因是使用了自定义单选按钮，它将输入的 CSS 显示值设置为 none，并且伪元素被样式化以代替原始输入。

一旦将其更改为可见性：隐藏；验证器似乎接受了规则。

要根据所选输入的值创建自定义方法，需要进一步过滤：

$.validator.addMethod("dateselected", function(value, element) {
    var radios = $('input[name='+element.name+']'),
    val = radios.filter(':checked')[0].value;
    console.log(val);
});

【讨论】：