1

我第一次使用带有 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 语句中，但无法弄清楚。我什至不确定这是否是正确的想法。

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

4

1 回答 1

0

有几种方法可以做到这一点，您正在寻找其中一种方法。不过我会建议一种不同的方式。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版本。

这是它的实际效果：http: //jsfiddle.net/ryleyb/fccPf/

于 2013-03-14T16:11:14.320 回答