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'
    }
 }

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

以下是实际行动：http://jsfiddle.net/ryleyb/fccPf/

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

1 个答案: