jquery validate form input if certain check boxes are checked

Question

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?

Answer 1

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.

$(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:

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

Answer 2

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.