FormChecker documentation
FormChecker checks the values of fields in a form
to ensure that valid values have been entered by the user when the form is submitted. If any of the fields does not contain a valid value an error message is shown and the form is not submitted. Values can be optional or required, and can be of the following types:
- General type: a value must be entered in the field
- Email: a valid email address must be entered in the field
- Number: an integer must be entered in the field
- Date: a date (in the format dd/mm/yyyy or mm/dd/yyyy) must be entered in the field
Optional fields will be accepted if they are empty, but will be rejected if an entered value does not match the type required. For example, if a field is set as field-optional-number
and no value is entered, the field is valid. If the value abc
is entered the field is invalid, and the form will not be submitted.
Example
<form action="#" class="formchecker" method="post">
<p><label for="required">Required field</label> <input type="text" id="required" name="required" class="field-required" />
<span id="required-notification"></span></p>
<p><label for="requiredemail">Required email</label> <input type="text" id="requiredemail" name="requiredemail" class="field-required-email" />
<span id="required-email-notification"></span></p>
<p><label for="optionalemail">Optional email</label> <input type="text" id="optionalemail" name="optionalemail" class="field-optional-email" />
<span id="optional-email-notification"></span></p>
<p><label for="requirednumber">Required number</label> <input type="text" id="requirednumber" name="requirednumber" class="field-required-number" />
<span id="required-number-notification"></span></p>
<p><label for="optionalnumber">Optional number</label> <input type="text" id="optionalnumber" name="optionalnumber" class="field-optional-number" />
<span id="optional-number-notification"></span></p>
<p><label for="requireddate">Required date</label> <input type="text" id="requireddate" name="requireddate" class="field-required-date" />
<span id="required-date-notification"></span></p>
<p><label for="optionaldate">Optional date</label> <input type="text" id="optionaldate" name="optionaldate" class="field-optional-date" />
<span id="optional-date-notification"></span></p>
<p><button type="submit">Submit form</button></p>
</form>
Settings
Form classname
The form you wish to check must have the CSS class formchecker
.
Valid elements
For all field types: any input type="text"
or textarea
elements. For the field-required
input type="checkbox"
and input type="radio"
elements are also supported.
Classname
Choose one of the following for each field:
field-required
- This field is required (also works for
input type="checkbox"
andinput type="radio"
elements). field-required-email
- This field must contain a valid email address.
field-optional-email
- This field can be left empty, or must contain a valid email address.
field-required-number
- This field must contain a valid integer.
field-optional-number
- This field can be left empty, or must contain a valid integer.
field-required-date
- This field must contain a valid date in the formats dd/mm/yyyy or mm/dd/yyyy.
field-optional-date
- This field can be left empty, or must contain a valid date in the formats dd/mm/yyyy or mm/dd/yyyy.
Attributes
None
CSS parameters (what’s this?)
None
Supporting elements
For each field having one of the classnames above a notification element must be present to display any errors for that field. For a field with the id firstname
the notification element must have an id of firstname-notification
. Example:
<p><label for="required">Required field</label>
<input type="text" id="firstname" name="firstname" class="field-required" />
<span id="firstname-notification"></span></p>