jQuery Validation Plugin - 根据下拉响应制作所需的复选框组 [英] jQuery Validation Plugin - make checkbox group required based on dropdown response

问题描述

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

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

<p><span class="bold large-font">8.</span>有些问题要回答是或否...</p><div class="margin-left-50"><select id="Q8" class="Q8" name="Q8"><option value=""选中></option><option value="是">是</option><option value="No">No</option></选择></div><div class="margin-left-50"><p><span class="斜体下划线">如果是，</span>指出哪些区域...</p></div><div class="margin-left-80"><input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes"/><label for="Q8yesA"><span class="small-font">a.</span>选项A</标签><br/>

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

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

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

$(function(){$.validator.addMethod('Q8yes', function (value) {return $('.Q8yes:checked').size() >0;}, '请在问题 8 中至少勾选一个框.');var checkboxes8 = $('.Q8yes');var checkbox_names8 = $.map(checkboxes8, function(e,i) { return $(e).attr("name")}).join(" ");$('#survey').validate({组:{检查8:复选框名称8},规则:{Q8:必填"，},消息:{Q8: "请回答第 8 题.",},错误容器:$('#errorContainer')，errorLabelContainer: $('#errorContainer ul'),包装:李"});});

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

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

解决方案

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

将其更改为:

现在，对于实际的 jQuery Validate 代码.如果按照我建议的方式执行此操作，您可能不需要组，相反，您可以拥有如下所示的 rules:

规则:{Q8:必填"，Q8是的:{必需:'#Q8 option[value="Yes"]:selected'},Q8yes列表:{必需:'#Q8yesD:已检查'}}

我使用了 dependency-expression 版本"nofollow">必需的规则.

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

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

So right now, my function looks like this:

$(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'
});
});

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!

解决方案

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

Change that to:

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

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

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

Here's what it looks like in action: http://jsfiddle.net/ryleyb/fccPf/

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