A reader on my first post on jQuery Form Validation asked an interesting question - how do you validate select form fields? Specifically, given that a drop down may have a 'Other' option, how do mark a text field required if the drop down is set to Other?
Before I answer that, let me first point out a simpler example. Given a drop down where the first option is 'Pick one of the below', how do you require a user to select one of the other items? Easy! Just make the first option have a blank value. Consider:
<select id="cjob" name="job">
<option value="">Select a Job</option>
<option value="1">Jedi</option>
<option value="2">Annoying Droid</option>
<option value="3">Bad Guy</option>
</select>
Notice how all the options, except the first, have a value? By just setting this drop down to required in our rules block, jQuery will handle ensuring that the user doesn't leave the drop down on the first option. To be honest, even with all the respect I've gained for jQuery, I didn't think it would be that easy. You can even specify that the user select a certain number of options (for multi-select drop downs) or that they must select a certain number but no more than some max. The plugin author has a nice demo page with examples of that. What I didn't see, though, was an example that matched what the reader wanted. If the drop down is on 'other', make some other field required. Here is how I solved it.
First, our form:
<form id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" />
</p>
<p>
<label for="cjob">Job</label>
<em>*</em><select id="cjob" name="job">
<option value="">Select a Job</option>
<option value="1">Jedi</option>
<option value="2">Annoying Droid</option>
<option value="3">Bad Guy</option>
<option value="other">Other (Enter Below)</option>
</select>
</p>
<p>
<label for="cother">Other Job:</label>
<input id="cother" name="otherjob" size="25" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
The form has 3 main fields: Name, Job, and Other Job. I want name to be required. I want job to be required. If you select Other for a job, I then want Other Job to be required as well. Here is the rules block I used:
rules: {
name: {
required: true,
minlength: 2
}
,job: {
required: true
}
,otherjob: {
required: function(element) {
return $("#cjob").val() == 'other'
}
}
}
Let's skip the first rule since it isn't anything new. The second rule applies just to the drop down. The use of required here will ensure that an option with some value has been picked. If I leave it on the first option there will be no value and the rule will fail. The third rule is where things get interesting. I essentially provide an inline function that returns true or false. The field will be required if and only if the value of cjob (my drop down) is set to other.
Next, I ensured my messages made all of the above clear:
messages: {
name: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
,job: "You must select a job."
,otherjob: "If you select 'other' for a job, you must enter it."
}
Pretty simple, right? Can anyone recommend an alternate way of solving this? You can find a demo of this code here:
http://www.coldfusionjedi.com/demos/jqueryvalidation/test4.html
p.s. I think I may forgo Star Wars for my next tattoo and just do 'jQuery FTW'. Or is that too fan boy?