jQuery Validation Plugin - 根据下拉响应制作所需的复选框组

Question

我第一次使用带有 HTML 表单的 jQuery Validation 插件。我习惯于为此使用普通的旧 javascript，但我非常喜欢这个插件！无论如何，我坚持尝试进行一些条件验证。

场景：我有一个表格中的两部分问题。第一部分是是/否下拉菜单（必需）。第二部分是一组复选框，如果您在上一个下拉列表中选择“是”，则必须至少选中其中一个。

<div>
<p><span class="bold large-font">8.</span> Some question to answer Yes or No to...</p>
<div class="margin-left-fifty">
    <select id="Q8" class="Q8" name="Q8">
        <option value="" selected></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>
<div class="margin-left-fifty">
    <p><span class="underline italic">If Yes,</span> indicate which areas...</p>
</div>
<div class="margin-left-eighty">
    <input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" />                    
    <label for="Q8yesA"><span class="small-font">a.</span> Option A</label>
    <br />
    <input id="Q8yesB" class="Q8yes" name="Q8yesB" type="checkbox" value="Yes" />                                            
    <label for="Q8yesB"><span class="small-font">b.</span> Option B</label>
    <br />
    <input id="Q8yesC" class="Q8yes" name="Q8yesC" type="checkbox" value="Yes" />                                            
    <label for="Q8yesC"><span class="small-font">c.</span> Option C</label>
    <br />
    <input id="Q8yesD" class="Q8yes" name="Q8yesD" type="checkbox" value="Yes" />                        
    <label for="Q8yesD"><span class="small-font">d.</span> Other</label>
    <input name="Q8yesDlist" type="text" maxlength="255" size="50" value="" placeholder="Please list..." />                    
</div>

请注意，这是一项相当大的调查的一部分，因此为了更轻松、更快速地进行整理，我将每个回复都设为一个单独的，而不是使用数组。

我相信我用来验证复选框的代码来自这里： validation for at least one checkbox

所以现在，我的函数如下所示：

$(function(){

$.validator.addMethod('Q8yes', function (value) {
return $('.Q8yes:checked').size() > 0; }, 'Please check at least one box for Question 8.');

var checkboxes8 = $('.Q8yes');
var checkbox_names8 = $.map(checkboxes8, function(e,i) { return $(e).attr("name")}).join(" ");              

$('#survey').validate({
groups: {
    checks8: checkbox_names8
},
rules: {
  Q8: "required",
},
messages: {
  Q8: "Please answer Question 8.",                              
},
errorContainer: $('#errorContainer'),
errorLabelContainer: $('#errorContainer ul'),
wrapper: 'li'
});
});

我一直在尝试将 addMethod 包装在 If 语句中，但无法完全弄清楚。我什至不确定这是否是正确的想法。

非常感谢您的帮助！谢谢！

Answer 1

有几种方法可以做到这一点，您正在寻找其中一种方法。不过我会建议一种不同的方式。首先，重新组织您的复选框以使其具有相同的name 属性但具有不同的value 属性是有意义的。这将使它们在 jQuery Validate 中表现得更好。这就是你现在拥有的：

<input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" />

将其更改为：

<input id="Q8yesA" class="Q8yes" name="Q8yes" type="checkbox" value="Q8yesA" />

现在，对于实际的 jQuery Validate 代码。如果按照我建议的方式执行此操作，您可能不需要组，而是可以让rules 看起来像这样：

rules: {
    Q8: "required",
    Q8yes: {
        required: '#Q8 option[value="Yes"]:selected'
    },
    Q8yesDlist: {
        required: '#Q8yesD:checked'
    }
 }

我使用了dependency-expression 版本的required 规则。

下面是实际效果：http://jsfiddle.net/ryleyb/fccPf/