Things to know about the jQuery form validation plugin
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
1. When dealing with input text you just need to add 'class' => 'required' to
<input type="text" 'class' => 'required' name="username"/>
2. Then add this line to get the form to validate
<script>
$().ready(function() {
$("#formValidate").validate();
});
</script>
3. What to do about checkboxes and how to position your error messages:
The form validate will auto insert your error messages when dealing with text fields and other input types. However when you're validating across multiple items like a checkbox you often want to position the error message in in a specific area.
eg.
<input type="text"><label class="error"> // Is fine
<input type="checkbox" name="data[]" value="1"><label class="error">
<input type="checkbox" name="data[]" value="1">
// The above error is out of place.
We can specify a label and use the for attribute to state where we want the error message to always show up.
<label class="error" for="data[]" >Pleased select at least two types of spam.</label> // insert this code anywhere on the page where you want the error message to appear
The problem arises when we
i) label.error { display: block; } // This causes the above label to always appear on first load of the page cause it's not hidden. Other inputs are fine as the validate 'auto-inserts' the errors.
ii) label.error { display: none; } // Next we try this style to make the explicit label.error disappear on first page load, but a side effect occurs. This style is inserted into ALL label.errors
style="display: inline"
Every label.error now loses their block style and we have a formatting problem
Solution:
1) http://groups.google.com/group/jquery-en/browse_thread/thread/2d87de7f74021f1a
<label for="data[]" class="error" style="display: none !important; clear: both; padding-bottom: 5px;">Pleased select at least two types of spam.</label> // This causes the label to be displayed hidden on the first load, and puts it on a new line cause of the clear: both;
2) OR wrap the label in a
<div class="errorCheckBoxBox"><label for="data[]" class="error"></label></div>
with the style
.errorCheckBox label{
display: none;
}
A better solution as it doesn't need additional style tags.