如果选中某些复选框，jquery 会验证表单输入

jquery validate form input if certain check boxes are checked

提问by justinavery

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.

我有一个多部分表单，它在开头获取基本用户信息，并通过一些 jquery.validate 错误检查来查看字段是否已填写以及电子邮件地址是否有效。

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.

在其下方有一系列用于新帐户、删除帐户、新软件等的复选框（type_of_request），它们在选中/取消选中时显示/隐藏这些表单元素。

I would like to validate the required sections on the form ONLY if the corressponding type_of_request item has been checked.

只有在检查了相应的 type_of_request 项目时，我才想验证表单上的必需部分。

---

---

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:

一个典型的场景是 type_request 中的电子邮件和其他复选框都已被选中：

   <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.desite, it doesn't work. Do I need to change the syntax to get this working?

这是在http://jquery.bassistance.de站点上描述的，它不起作用。我是否需要更改语法才能使其正常工作？

采纳答案by justinavery

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/

我最终采用的解决方案是从http://bassistance.de/jquery-plugins/jquery-plugin-validation/链接 jquery.validate.js 和 jquery.metadata.js

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

然后我在表单顶部有一个请求类型的检查列表，当您检查项目时显示/隐藏 id 元素（显示/隐藏功能未显示）。

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

类中的“必需”值通常适用于 true 或 false ie {required:'true', messages:{required:'This field is required'}}，但在这种情况下，我们在其中放置了一个引用，而不是标准的 true 或 false, #checkboxid:checked。如果选中它，它会返回 as'true'并且该字段成为必需的，如果它返回，则'false'该字段不是必需的。

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 属性来确保有人在表单的开头选择了请求类型

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.

如果您需要选中多个复选框，则只需添加到最小长度。

回答by tvanfosson

Assuming that you are using the jQuery validation plugin, you could set/clear the class of each of the controls in the required/not required sections based on the checkbox that was clicked.

假设您正在使用 jQuery验证插件，您可以根据单击的复选框设置/清除必需/不需要部分中每个控件的类。

$(document).ready( function() { $('form').validate(); } );

function init_validation(divName)
{
    $('div#' + divName).find('input').addClass( 'required' );
    $('div#inputs').children('div:not(#' + divName + ')')
                  .find('input')
                  .removeClass( 'required' );
}

HTML:

HTML：

<form>
<div>
  <input type='radio'
         id='new_account_radio'
         name='interface_selector'
         value='new_account'
         selected=true
         onclick='init_validation("new_account");' /> New Account

  <input type='radio'
         id='delete_account_radio'
         name='interface_selector'
         value='delete_account'
         onclick='init_validation("delete_account");' /> Delete Account

  <input type='radio'
         id='new_software_radio'
         name='interface_selector'
         value='new_software'
         onclick='init_validation("new_software");' /> New Software

</div>

<div id='inputs'>
   <div id='new_account'>
       <input type='text' id='new_account_name' class='required' />
   </div>

   <div id='delete_account'>
       <input type='text' id='delete_account_name' />
   </div>

   <div id='new_software'>
       <input type='text' id='new_software_name' />
   </div>
</div>
</form>