Ok so I went on a wild goose chase to find out how to customize jQuery messages AND place them in a nicer area on the page than the default which is somewhere that doesn't look good.
I had to dig around in Google land but finally pieced together a solution:
Here is my jQuery code snippet:
$(document).ready(function(){
$("#step1").validate({
rules: {
institutionName: "required",
institutionAddress: "required",
institutionCity: "required",
institutionState: "required",
institutionPostalCode: "required",
institutionCountry: "required",
institutionLanguage: "required"
},
messages: {
institutionName: "Please enter the name of your institution",
institutionAddress: "Please enter your institution's address",
institutionCity: "Please enter your institution's city",
institutionState: "You must select a state",
institutionPostalCode: "Please enter your institution's postal code",
institutionCountry: "Please select a country",
institutionLanguage: "Please select a preferred language"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next() );
else if ( element.is(":checkbox") )
error.appendTo( element.parent().next() );
else
error.appendTo( element.parent().next() );
},
});
});
Now let's explain:
1. In the code snippet above, step1 is the NAME of my form.
2. In the RULES piece of the code, these are all of the fields that I would like to be required.
3. the MESSAGES piece is "What do I want the user to see when he/she gets the required alert
4. ERROR PLACEMENT - this places the error message into the NEXT element.
Ok so here is part of my form:
<tr>
<td class="label"> <span class="alerttext4"> *</span>
<label id="institutionName" for="institutionName"> Name of Institution</label> </td>
<td class="field"> <input id="institutionName" size="45" name="institutionName" type="text" value="#form.institutionName#" /> </td>
<td class="status"> </td>
</tr>
See that last little TD that has nothing in it: <td class="status"> </td> - that is where the error message will be displayed. Nice and neatly placed on the right side of the field.
*ALL SMILES*
Let me know how it works out for you!