jQuery验证插件-根据下拉响应使复选框组成为必需 [英] jQuery Validation Plugin - make checkbox group required based on dropdown response

问题描述

我第一次使用带有HTML表单的jQuery Validation插件.我曾经为此使用普通的旧javascript，但我完全喜欢这个插件！无论如何，我坚持尝试进行一些条件验证.

I'm using the jQuery Validation plugin with an HTML form for the first time. I'm used to using plain old javascript for this, but I totally love this plugin! Anyway, I'm stuck on trying to do some conditional validating.

场景:我在表格中有一个分为两部分的问题.第一部分是是/否"下拉列表(必填).第二部分是一组复选框，如果您在上一个下拉列表中选择了是"，则必须选中其中的至少一个复选框.

The scenario: I have a two-part question in a form. The first part is a Yes/No dropdown (required). The second part is a group of checkboxes, which you must check at least one of them if you selected "Yes" in the previous dropdown.

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

请注意，这是一项相当大的调查的一部分，因此，为了使整理起来更轻松，更快捷，我将每个响应都设为个人，而不是使用数组.

Note that is part of a rather large survey, so to make it easier and quicker to collate, I made each response an individual, rather than using an array.

我相信我用来验证复选框的代码来自此处: 验证至少一个复选框

I believe the code I'm using to validate the checkboxes is from here: 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语句中，但无法完全弄清楚.我什至不确定这是否是正确的主意.

I've been trying to wrap the addMethod in an If statement, but couldn't quite figure it out. I'm not even sure if that's the right idea.

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

You're help is greatly appreciated! Thanks!

推荐答案

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

There are a few ways to do this, and you're on track for one of them. I'm going to suggest a different way though. First off, it makes sense to reorganize your checkboxes to all have the same name attribute but different value attributes. That will make them behave better within jQuery Validate. This is what you have now:

<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看起来像这样:

Now, for the actual jQuery Validate code. You probably don't need groups if you do this the way I suggested, instead you can just have rules that look like this:

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

我使用了要求的dependency-expression版本规则.

I've used the dependency-expression version of the required rule.

实际情况如下: http://jsfiddle.net/ryleyb/fccPf/

这篇关于jQuery验证插件-根据下拉响应使复选框组成为必需的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！