Question

I have a drop-down that lists types of reports the user can generate, once they select the type of report, it will display another drop-down, as seen in this screenshot.

<select name="type_of_report" id="type_of_report">
<option value="" selected="selected"></option>
<option value="all_students">All students</option>
<option value="state">State</option>
<option value="sport_id">Sport</option>
<option value="major_id">Interest of Study</option>
<option value="graduation_year">High School Graduation Year</option>
<option value="recruitment_place_id">Where they heard about us</option>
</select>

If they select state, I’d want to require the state field.

In theory, this is what I’d like to do:

$("#type_of_report").live("change", function() {
 var report_selected = $("#type_of_report").val();
});

$("form").validate({
 rules: {

  if(report_selected != '') {
    report_selected: { required: true },
  }

  type_of_report: { required: true }
 }
});

Answer 1

I recently did a very complex dynamic form with lots of fields that the user could add. These were newly created input elements, not hidden. I simply added the class required, using jQuery’s addClass, to the new fields as they were created.

$("#myNewInput").addClass("required");