JQuery steps form validation - problem with conditional rule

[LazyDragon]

Hey!I'm having problem with adding one 'Please add date of birth' message if any date-select-box is empty... How do I achieve it?HTML CODE (Simplified part of my form)

<form id="example-form" action="#">  <div>    <h3>Personal Info</h3>    <section>      <div class="leftside">        <label for="firstName">First Name *</label>        <input id="firstName" name="firstName" type="text" class="required">        <div>          <label for="birthDate">Date of Birth *</label>          <div style="float: left; padding: 2px;">            <select id="gsmonth" name="gsmonth">              <option value="">-</option>              <option value="1">January</option>              //[more options]            </select>          </div>          <div style="float: left; padding: 2px;">            <select id="gsday" name="gsday">              <option value="">-</option>              <option value="1">1</option>            //[more options]          </div>          <div style="float: left; padding: 2px;">            <select id="gsyear" name="gsyear">              <option value="">-</option>              <option value="2000">2000</option>            //[more options]          </div>      </div>      <div id="rightside">        //[...]      </div>    </section>    //[title and another section]</form>

If I'd add a "required" class to those select fields, for each empty select displaying "This field is requied" that is destroying design of fields (Means 3 empty fields = 3 messages). I'd like to make jQuery rule that will display one error message if any of those fields are missing and show it under label "birthDate".I have jQuery Steps, JQuery Validation and JQuery Additional Methods (just to control files upload) plugin added.

 

For now simple rules like this was enough to control other select fields:

$( "#residence" ).rules( "add", {	required: true,	messages: {	required: "Please select your country of residence. ",}});

Please help me with handling of this messages

Edited September 11, 2015 by LazyDragon

[dsonesuk]

Apparently you have an option to specify groups of field inputs (see http://jqueryvalidation.org/validate/ under groups) for validation.

[LazyDragon]

Yay, it helped!

 

Made groups

groups: {   bday: "gsday gsmonth gsyear"},

Added simple rule under errorPlacement: function(error, element)

if (element.attr("name") == "gsday" || element.attr("name") == "gsmonth" || element.attr("name") == "gsyear" ) {   error.insertAfter("#birthDate");} else {   error.insertAfter(element);}

...aaand my message is showing after label of id #birthDate as it should - if any of fields are empty

 

Thank you for your help!