Getting started

If you just need to get started with the validator, please check this basic sample page. View a complete list of examples here.

The complete syntax reference is included below

The <form> tag

There are only three validation attributes that apply to the form tag

tmt:validate This attribute is required in order to enable validation on the current form (see sample)
tmt:blocksubmit By default submit buttons are disabled after the form is submitted. This prevents multiple submits but also prevents the value of the submit buttons from being passed as part of the HTTP request. Set this attribute to false to keep the submit buttons enabled

If you expect your users to be able to use the "back" button and resubmit the form, you will need to set tmt:blocksubmit="false" or take other steps to re-enable the submit buttons when returning to the form
tmt:callback This attribute allows a developer to take full control over error notification. Using this attribute requires some basic JavaScript programming skills (see sample and instructions)
If a custom call back is specified, the validator will pass two arguments to it:
  1. formNode: a reference to the form DOM node
  2. validators: an array of validator objects (containing name and message properties)

Sample XHTML code:

<form action="index.htm" tmt:validate="true" tmt:callback="displayError">

Text fields and textarea tags

The attributes below apply to both input/text, input/password, input/file and textarea tags:

tmt:required It's one of the most important attributes (see sample), set it to true to flag the field as required (default is false)
In case you need conditional validation, set it to the name of a custom function (see sample and instructions)

Please note the way the library handles conditional validation changed dramatically in version 2.0. Code written for 1.x will not be compatible
tmt:message The error message associated with the field
tmt:errorclass Use this attribute if you want to associate a CSS class to a field whenever it's flagged as invalid (see sample)
tmt:pattern

There are 6 generic built-in patterns:

  • email
  • lettersonly
  • alphanumeric
  • integer
  • positiveinteger
  • number

5 additional patterns focus on file upload (see sample)

  • filepath_pdf
  • filepath_jpg_gif
  • filepath_jpg
  • filepath_zip
  • filepath

Custom patterns can be added (see sample and instructions)
tmt:filters

Filters are a very effective way to prevent users from entering incorrect data from the very beginning (see sample)

This attribute accepts a comma delimited list of filter names, allowing the application of more than one filter to a single field

There are 15 built-in filters:

  • ltrim
  • rtrim
  • nospaces
  • nocommas
  • nodots
  • noquotes
  • nodoublequotes
  • nohtml
  • alphanumericonly
  • numbersonly
  • lettersonly
  • commastodots
  • dotstocommas
  • numberscommas
  • numbersdots
  • demoronizer (replace MS Word's non-ISO characters with plausible substitutes)

Custom filters can be added (see sample and instructions)
tmt:minlength Enforce a minimum length (see sample)
tmt:maxlength Enforce a maximum length (see sample)
tmt:minnumber Enforce a minimum numeric value (see sample)
tmt:maxnumber Enforce a maximum numeric value (see sample)
tmt:datepattern

There are 14 built-in date patterns (see sample):

  • YYYY-MM-DD
  • YYYY-M-D
  • MM.DD.YYYY
  • M.D.YYYY
  • MM/DD/YYYY
  • M/D/YYYY
  • MM-DD-YYYY
  • M-D-YYYY
  • DD.MM.YYYY
  • D.M.YYYY
  • DD/MM/YYYY
  • D/M/YYYY
  • DD-MM-YYYY
  • D-M-YYYY

Custom date patterns can be added (see sample and instructions)
tmt:mindate Enforce a minimum date (see sample)
If no tmt:datepattern is specified, YYYY-MM-DD will be used to parse and compare dates. If tmt:datepattern is specified, it's enforced on both the field value and the value used for tmt:mindate
tmt:maxdate Enforce a maximum date (see sample)
If no tmt:datepattern is specified, YYYY-MM-DD will be used to parse and compare dates. If tmt:datepattern is specified, it's enforced on both the field value and the value used for tmt:maxdate
tmt:equalto Compares two field values for equality (see sample and instructions)
Text fields can also trigger custom validation. See example

Examples:

<input type="text" name="emailfield" tmt:required="true" tmt:errorclass="invalid" tmt:message="Please insert a valid email" tmt:pattern="email" />

<input type="text" name="datefield" tmt:message="Please insert a valid date using the YYYY-MM-DD format" tmt:errorclass="invalid" tmt:datepattern="YYYY-MM-DD" />

<input type="text" name="agefield" tmt:required="true" tmt:errorclass="invalid" tmt:message="Please insert a valid age" tmt:pattern="positiveinteger" tmt:minnumber="18" tmt:maxnumber="75" tmt:filters="numbersonly" />

Checkboxes

Checkboxes are a special kind of field, since they often come in groups, sharing the same name but having different values. TMT Validator validates a set of checkboxes with the same name as a unique entity (see sample and instructions).

There are two attributes that apply only to checkboxes validation:

tmt:minchecked Ensure that at least a minimum number of boxes are checked in a group
tmt:maxchecked Specify a maximum number of boxes that can be checked in a group

The tmt:message and tmt:errorclass attributes can be used in the same way as on any other form field:

tmt:errorclass Use this attribute if you want to associate a CSS class to a field whenever it's flagged as invalid
tmt:message The error message associated with the field

Sample XHTML code:

<input name="drink" type="checkbox" class="boxes" value="Nicole" tmt:minchecked="2" tmt:maxchecked="3" tmt:message="Please select at least two ladies" />

Radio buttons

Radio buttons are a special kind of field, since they come in groups, sharing the same name but having different values. TMT Validator validates a set of radios with the same name as a unique entity (see sample and instructions).

The tmt:required attribute force the user to select a radio button among the group:

tmt:required Set it to true to flag group of buttons as required (default is false)

The tmt:message and tmt:errorclass attributes can be used in the same way as on any other form field:

tmt:errorclass Use this attribute if you want to associate a CSS class to a field whenever it's flagged as invalid
tmt:message The error message associated with the field

Sample XHTML code:

<input name="drink" type="radio" class="boxes" value="Nicole" tmt:required="true" tmt:message="Please select a lady" />

Select tags

There are two different attributes that apply only to drop-down lists created using the <select> tag (see sample)

tmt:invalidindex Prevent the user from selecting an entry from a given position (zero based)
tmt:invalidvalue Prevent the user from selecting an entry with a given value
Select tags, just like text fields, can also trigger custom validation. See example

The tmt:message and tmt:errorclass attributes can be used in the same way as on any other form field:

tmt:errorclass Use this attribute if you want to associate a CSS class to a field whenever it's flagged as invalid
tmt:message The error message associated with the field

Sample XHTML code:

<select name="dish" tmt:invalidvalue="Crepes" tmt:message="Only traditional Italian dishes please, no foreign stuff!">
<option value="Spaghetti">Spaghetti</option>
<option value="Pizza">Pizza</option>
<option value="Crepes">Crepes suzette</option>
<option value="Mozzarella">Mozzarella alla caprese</option>
</select>

Submit buttons

Large forms, especially the ones with file upload, can require some processing time, during this process it's better to avoid multiple submits from the user. That's why the validator automatically disables all the submit buttons after a form successfully passes the validation process (see sample)

tmt:waitmessage Display this string as the button's label during form processing, after successful validation

Sample XHTML code:

<input type="submit" value="Submit" tmt:waitmessage="Processing..." />

API

tmt.validator.validateFields(fields[], [callback]) Programmatically validate one or more fields (see sample)
Returns true if the fields contain no errors, false otherwise

First argument is required. An array of fields. Array's elements can contain either an id (string) or a DOM node reference

Second argument is optional; it can be an error callback. If not specified, the callback assigned to the form will be used
If a custom call back is specified, the validator will pass two arguments to it:

  1. formNode: a reference to the form DOM node
  2. validators: an array of validator objects (containing name and message properties)
tmt.validator.validateField(field, [callback]) Programmatically validate one field (see sample)
Returns true if the field contains no errors, false otherwise

First argument is required. It can be either an id (string) or a DOM node reference

Second argument is optional; it can be an error callback. If not specified, a plain JavaScript alert will be used
If a custom call back is specified, the validator will pass two arguments to it:

  1. fieldNode: a reference to the field DOM node
  2. validator: a validator object (containing name and message properties)
tmt.validator.validateForm(formNode) Programmatically validate a form. Accepts either an id (string) or a DOM node reference (see sample)
tmt.validator.filters.init(fields[]) Programmatically attach filters to an array/nodeList of fields. To be used if you add form fields at run-time

Very special thanks to Alex Marino and Rob Turnbull