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" and input 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>