jquery validation: Making a field required when a specific option is selected.

Question

Thanks for your help. I'm sure there is an easy way to do this, but I can't figure it out. Basically I need jquery to set a certain select tag as required in the jquery rules, IF another with a specific value is selected.

<form action="here" method="post" id="application">

<span class="label">Would you be able to pass a criminal background check?</span>
    <select name="backgroundCheck" id="backgroundCheck">
     <option value="">Please select</option>
     <option id="backgroundYes" value="Yes">Yes</option>
     <option id="backgroundNo" value="No">No</option>
    </select>

(If one selects 'Yes', then this felonies div pops up)

<div id="felonies" style="display: none;">
      <span class="label">Any past felonies on your record?</span><br />
       <select name="backgroundFelonies" id="backgroundFelonies">
         <option value="">Please select</option>
         <option value="Yes">Yes</option>
         <option value="No">No</option>
       </select>
</div>
....

Basically if the user can't pass a criminal background check, they are asked if they have any felonies. It's always required that the user answer the criminal background check question. If they answer no to that question, the felonies question comes in and that's when I need select Felonies tag to be required in jquery. Also, I don't want the felonies required if the user is able to pass a criminal background check. I can do this in javascript, but I haven't been able to do it in jquery.

Below you'll see the commented line of code I need to activate when the value of

<select name="backgroundCheck" id="backgroundCheck"> is 'yes'




$(document).ready(function(){

    jQuery.validator.messages.required = "Please complete the required fields.";

    $("#application").validate({
        errorLabelContainer: "#error-note",
        rules: {
          firstName: "required",
          lastName: "required",
          phone: "required",
          email: "required",
          address1: "required",
          city: "required",
          zip: "required",
          experience: "required",
          yearsExperience: "required",
          transportation: "required",
          legalToWork: "required",

          backgroundCheck: "required",
        //backgroundFelonies: "require",       <------------------ This one
          speakEnglish: "required"

        },

        groups: {
        collecive: "firstName lastName email address1 city zip phone experience   yearsExperience transportation legalToWork speakEnglish backgroundCheck"
        }
    });
  });

This is probably easy to do, but I know I'm looking at this the wrong way. I'm very new to jquery and all the conventional methods I've tried have failed.

Thanks

Answer 1

You can use a function which will return true/false

jQuery(function($) {

  jQuery.validator.messages.required = "Please complete the required fields.";

  $("#application").validate({
    errorLabelContainer: "#error-note",
    rules: {
      firstName: "required",
      lastName: "required",
      phone: "required",
      email: "required",
      address1: "required",
      city: "required",
      zip: "required",
      experience: "required",
      yearsExperience: "required",
      transportation: "required",
      legalToWork: "required",

      backgroundCheck: "required",
      backgroundFelonies: {
        required: function() {
          return $('#backgroundCheck').val() == 'Yes';
        }
      }, //       <------------------ This one
      speakEnglish: "required"

    },

    groups: {
      collecive: "firstName lastName email address1 city zip phone experience   yearsExperience transportation legalToWork speakEnglish backgroundCheck"
    }
  });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<form id="application" method="post" action="">
  <div>
    <span class="label">Would you be able to pass a criminal background check?</span>
    <select name="backgroundCheck" id="backgroundCheck">
      <option value="">Please select</option>
      <option id="backgroundYes" value="Yes">Yes</option>
      <option id="backgroundNo" value="No">No</option>
    </select>
  </div>

  <div id="felonies">
    <span class="label">Any past felonies on your record?</span>
    <br />
    <select name="backgroundFelonies" id="backgroundFelonies">
      <option value="">Please select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <input type="submit" class="button" value="Submit" />
</form>