Jump to content

JQuery steps form validation - problem with conditional rule


LazyDragon
 Share

Recommended Posts

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 by LazyDragon
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...