Define validators¶

Formtools is designed to accept configurations and validators hierarchically.

Levels importance (from lowest to highest):

Javascript configurations
Validators on the form tag (They overwrite Javascript configurations)
Validators on the input tag (They overwrite both Validators on the form tag and Javascript configurations)

Validators are defined within the HTML form structure.

Validators on the input tag¶

You can put the following attributes on form inputs

<input [validators] …>
Required	`data-ft-required`
Optional	`data-ft-optional`
Minlength	`data-ft-minlength="5"`
Regex	`data-ft-regex="([A-Z])\w+"`
DateFormat	`data-ft-date-format="YYYY"`
DateRange	`data-ft-date-range="1900-01-01:0"`

Required¶

data-ft-required

It makes the field required, not empty.
Blanks are considered empty.

<input type="text" name="address" data-ft-required />

To overwrite the preset value: data-ft-required="[true|false]"

Optional¶

data-ft-optional

Use the optional validator to allow empty field and at the same time validate it if any content has been inserted.

<input type="text" name="address" data-ft-optional data-ft-regex="([A-Z])\w+" />

To overwrite the preset value: data-ft-optional="[true|false]"

Minlength¶

data-ft-minlength="5"

As the maxlength HTML input requirement, you can ask for a minimum length of the content.

<input type="text" name="address" data-ft-minlength="5" />

To overwrite the preset value just define the validator

Regex¶

data-ft-regex="([A-Z])\w+"

Just use a regex to validate the field.

<input type="text" name="address" data-ft-regex="([A-Z])\w+" />

To overwrite the preset value just define the validator

DateFormat¶

data-ft-date-format="YYYY"

Using moment.js date sintax you can specify a date format required.

<input type="date" name="costructionYear" data-ft-date-format="YYYY" />

To overwrite the preset value just define the validator

DateRange¶

data-ft-date-range="1900-01-01:0"

Based on the ISO 8601 standard it expect a StartDate:EndDate sintax.
The 0 value means no limit.

WARNING!
The range must be defined in the ISO 8601 format, don’t use the data-ft-date-format defined format!

The following example require a date after the first january of 1900

<input type="date" name="costructionDate" data-ft-date-range="1900-01-01:0" data-ft-date-format="MM/DD/YYYY" />

To overwrite the preset value just define the validator

Validators on the form tag¶

You can put the these attributes on form tags

<form [validators] …>
Required	`data-ft-required`	All inputs in the form are required. It follows Required overwriting rules to overwrite Javascript configured validators
Optional	`data-ft-optional`	All inputs in the form are optional. It follows Optional overwriting rules to overwrite Javascript configured validators
Minlength	`data-ft-minlength="5"`	All inputs in the form must have at least 5 characters. It follows Minlength overwriting rules to overwrite Javascript configured validators
RegEx	`data-ft-regex="([A-Z])\w+"`	All inputs in the form must match the regex. It follows Regex overwriting rules to overwrite Javascript configured validators
DateFormat	`data-ft-date-format="YYYY"`	All type=”date” inputs in the form must match the date format. It follows DateFormat overwriting rules to overwrite Javascript configured validators
DateRange	`data-ft-date-range="1900-01-01:0"`	All type=”date” inputs in the form must match the date range. It follows DateRange overwriting rules to overwrite Javascript configured validators