With the suggestion earlier, everything is working great, yay! All of
my validation rules are also working, as well, except I can't figure
out how to write the rule for my multi-option check box that has an
"Other" option so that if other is among those checked, it will
require the other input box be filled in. I have two similar ones like
that, but since they are radio buttons, I was able to just use rules
based on the demos. The rules I have and the relevant bit of the HTML
form below for easier reading. Basically, if one of the options
selected in the whyvisit set of checkboxes is the other option, the
whyvisitother input field needs to be required.
~~ SNIPPET ~~
rules: {
recommend: "required",
howlearnedother: {
required: function(element) {
return $('#howlearned input[name=howlearned]:checked').val() ==
0;
}
},
describeyouother: {
required: function(element) {
return $('#describeyou input[name=describeyou]:checked').val()
== 0;
}
}
},
~~HTML ~~
<label for="whyvisit">Why did you visit the SRAC web site?</label>
<div id="whyvisit">
<input name="whyvisit" type="checkbox" class="checksandradios"
value="1" /> Aquaculture producer looking for information<br /> <input
name="whyvisit" type="checkbox" class="checksandradios" value="2" />
Educator looking for information for my classroom<br />
<div id="whyvisiteducator">
<select name="whyvisiteducator">
<option value="1">Middle School</option>
<option value="2">High School</option>
<option value="3">2-Year College</option>
<option value="4">4-Year College</option>
</select>
</div>
<input name="whyvisit" type="checkbox" class="checksandradios"
value="3" /> Student<br />
<div id="whyvisitstudent">
<select name="whyvisitstudent">
<option value="1">Middle School</option>
<option value="2">High School</option>
<option value="3">2-Year College</option>
<option value="4">4-Year College</option>
</select>
</div>
<input name="whyvisit" type="checkbox" class="checksandradios"
value="4" /> Individual interested in learning more about
aquaculture<br />
<input name="whyvisit" type="checkbox" class="checksandradios"
value="0" /> Other <input id="whyvisitother" name="whyvisitother"
type="text" value="" size="30" maxlength="30" /> <br />
</div>
