Question

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

与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);
});

Answer 1

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

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

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

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

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

1 个答案: