jquery验证表单输入如果选中某些复选框 [英] jquery validate form input if certain check boxes are checked
问题描述
我有一个多部分表单，在开始时使用一些jquery.validate错误检查基本用户信息，以查看字段是否已填写，电子邮件地址是否有效。
下面是新帐户，删除帐户，新软件等一系列复选框（type_of_request），它们在检查/取消选中时显示/隐藏表单元素。
如果已选中相应的type_of_request项，我想在表单上验证所需的部分。
更新信息
这是一个很好的解决方案，但似乎使所有选择的部分的孩子都需要。 p>
典型的情况是在type_request中选择电子邮件和其他复选框：
< div id =emailstyle =display：block;> //显示，因为在类型请求中已选择其他类型
< input id =email_new_accountclass =sq-form-fieldtype =checkboxvalue =0name =q4836：q1 /> // not required
< input id =email_new_account_nameclass =sq-form-fieldtype =textname =q4836：q2/> // if email_new_account checked then make required
< input id =email_new_account_accessclass =sq-form-fieldtype =textname =q4836：q2/> // if email_new_account checked then make required
< input id =email_new_account_managerclass =sq-form-fieldtype =textname =q4836：q3/> // if email_new_account checked then make required
< input id =email_add_remove_accessclass =sq-form-fieldtype =checkboxvalue =0name =q4837：q1 /> // not required
< input id =email_add_remove_account_nameclass =sq-form-fieldtype =textname =q4837：q2/> // if email_add_remove_access checked then make required
< input id =email_add_accessclass =sq-form-fieldtype =textname =q4836：q2/> // if email_add_remove_access checked then make required
< input id =email_remove_accessclass =sq-form-fieldtype =textname =q4837：q3/> // if email_add_remove_access checked then make required
< / div>
< div id =otherstyle =display：block;> //显示，因为在类型请求中已选择其他类型
< input id =other_describe_requestclass =sq-form-fieldtype =textname =q4838：q1/> // required因为#other被检入类型请求
< input id =other_request_justificationclass =sq-form-fieldtype =textname =q48387：q2/> // required因为#other被检入类型请求
< / div>
进一步阅读
我已经进一步检查了这一点，发现以下内容可以添加到输入项的类
class ={required：true，messages：{required：'Please enter
your email address'}}
或
class = true，email：true，messages：{必填：请输入
您的电子邮件地址，电子邮件：请输入有效的电子邮件地址}}
但是当我添加
class ={required：输入[@ name = other]：checked'}
< http://jquery.bassistance.de/api-browser/plugins.html#jQueryvalidatormethodsrequiredStringElementBooleanStringFunction =nofollow noreferrer> http://jquery.bassistance.de 网站，它不工作。我需要改变语法才能使这个工作吗？
我最终使用的解决方案是链接jquery。 validate.js和jquery.metadata.js来自 http://bassistance.de/jquery -plugins / jquery-plugin-validation /
然后，我在表单顶部有一个请求类型检查列表，显示/隐藏id元素当您检查该项目时（显示/隐藏功能未显示）。
< fieldset id =request-type>
< legend>请求类型< / legend>
< ul>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_0value =0class =sq-form-field/>< label for =q4838_q1_0>新帐户< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_1value =1class =sq-form-field/>< label for =q4838_q1_1>删除帐户< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_2value =2class =sq-form-field/>< label for =q4838_q1_2>更改访问/帐户转移< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_3value =3class =sq-form-field/>< label for =q4838_q1_3>硬件< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_4value =4class =sq-form-field/>< label for =q4838_q1_4>软件< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_5value =5class =sq-form-field/>< label for =q4838_q1_5>电子邮件< / label>< / li>
< li>< input type =checkboxname =q4838：q1 []id =q4838_q1_6value =6class =sq-form-field/>< label for =q4838_q1_6>其他< / label>< / li>
< / ul>
< / fieldset>
对于这个例子，我们会说删除帐户 / p>
< fieldset id =delete-accountstyle =display：block;&
由于在选择删除帐户选项时，字段集中的两个输入字段都是必需的将以下内容添加到所需输入的类属性。
class ={required：'＃checkboxid：checked' ：{required：'required error message'}}
像这样.....
< fieldset id =delete-accountstyle =display：block;> ;
< legend>删除帐户< / legend>
< label for =q4832_q1>停止日期< / label>
< input type =textname =q4832：q1value [d]value =class ={required：'＃q4838_q1_1：checked'，messages：{required：'Enter Cessation Date'} }id =q4832：q1value [d]/>
< label for =q4832_q1>资产列表< / label>
< input type =textname =q4832：q2value =class ={required：'＃q4838_q1_1：checked'，messages：{required：'Enter Cessation Date'}}id =q4832：q2/>
< / fieldset>
类中的必需值通常适用于true或false，即 {required：'true'，messages：{required：'This field is required'}} ，但在这种情况下，我们引入了一个引用，而不是标准true或false， #checkboxid：checked 。如果检查它返回'true'，并且该字段为必填，如果返回'false'该字段不是必需的。
我发现有用的另一件事是确保有人在表单的开头选择了一个请求类型，通过将以下内容添加到类属性每个复选框
class ={required：'true'，minlength：1，messages：{required：'Please select a checkbox'}}
如果您需要更多的复选框，那么只需添加到minlength 。
I have a multipart form that takes basic user information at the beginning with some jquery.validate error checking to see if the fields have been filled in and the email address is valid.
Below that there is a series of check boxes (type_of_request) for new accounts, delete accounts, new software etc which show/hide those form elements as they are checked/unchecked.
I would like to validate the required sections on the form ONLY if the corressponding type_of_request item has been checked.
Update information
That's a great solution but seems to make all of the children of the selected section required.
A typical scenario will be both the email and other checkbox in the type_request has been selected:
<div id="email" style="display: block;"> // shown because other has been selected in the type request
<input id="email_new_account" class="sq-form-field" type="checkbox" value="0" name="q4836:q1"/> // not required
<input id="email_new_account_name" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
<input id="email_new_account_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
<input id="email_new_account_manager" class="sq-form-field" type="text" name="q4836:q3"/> // if email_new_account checked then make required
<input id="email_add_remove_access" class="sq-form-field" type="checkbox" value="0" name="q4837:q1"/> // not required
<input id="email_add_remove_account_name" class="sq-form-field" type="text" name="q4837:q2"/> // if email_add_remove_access checked then make required
<input id="email_add_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_add_remove_access checked then make required
<input id="email_remove_access" class="sq-form-field" type="text" name="q4837:q3"/> // if email_add_remove_access checked then make required
</div>
<div id="other" style="display: block;"> // shown because other has been selected in the type request
<input id="other_describe_request" class="sq-form-field" type="text" name="q4838:q1"/> // required because #other was checked in type request
<input id="other_request_justification" class="sq-form-field" type="text" name="q48387:q2"/> // required because #other was checked in type request
</div>
Further Reading
I have reviewed this even further and found that the following can be added to the class of the input items
class="{required:true, messages:{required:'Please enter
your email address'}}"
or
class="{required:true, email:true, messages:{required:'Please enter
your email address', email:'Please enter a valid email address'}}"
but when I add
class="{required:'input[@name=other]:checked'}"
which was described on the http://jquery.bassistance.de site, it doesn't work. Do I need to change the syntax to get this working?
The solution I ended up going with was to link the jquery.validate.js and jquery.metadata.js from http://bassistance.de/jquery-plugins/jquery-plugin-validation/
I then had a check list of request types at the top of the form which show/hide the id element when you checked the item (show/hide function not shown).
<fieldset id="request-type">
<legend>Type of Request</legend>
<ul>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_0" value="0" class="sq-form-field" /><label for="q4838_q1_0">New account</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_1" value="1" class="sq-form-field" /><label for="q4838_q1_1">Delete account</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_2" value="2" class="sq-form-field" /><label for="q4838_q1_2">Change access/account transfer</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_3" value="3" class="sq-form-field" /><label for="q4838_q1_3">Hardware</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_4" value="4" class="sq-form-field" /><label for="q4838_q1_4">Software</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_5" value="5" class="sq-form-field" /><label for="q4838_q1_5">Email</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_6" value="6" class="sq-form-field" /><label for="q4838_q1_6">Other</label></li>
</ul>
</fieldset>
For this example we'll say that "Delete Account" has been checked which would "show"
<fieldset id="delete-account" style="display: block;">
Because both of the input fields within the fieldset are required when the delete account option is checked I've added the following to the class attribute of the required input.
class="{required:'#checkboxid:checked', messages:{required:'required error message'}}"
The "delete-account" fieldset then looks like this.....
<fieldset id="delete-account" style="display: block;">
<legend>Delete Account</legend>
<label for="q4832_q1">Cessation date</label>
<input type="text" name="q4832:q1value[d]" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q1value[d]" />
<label for="q4832_q1">List of assets</label>
<input type="text" name="q4832:q2" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q2" />
</fieldset>
The "required" value in the class usually works on true or false i.e. {required:'true', messages:{required:'This field is required'}}, but in this case we put a reference in there instead of the standard true or false, #checkboxid:checked . If it is checked it returns as 'true' and the field becomes required, and if it comes back 'false' the field is not required.
Another thing I found useful was to ensure that someone selected a request type at the beginning of the form by adding the following to the class attribute on each of the checkboxes
class="{required:'true', minlength:1, messages:{required:'Please select a checkbox'}}"
If you need more then one check box selected then just add to the minlength.
这篇关于jquery验证表单输入如果选中某些复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
