Default validation rules

The HTML Standard specifies a number of constraints that are implemented as standard as part of DomValidation, and are listed on this page with examples of how to use them.

Required fields

• required boolean attribute

Specifies whether a form field needs to be filled in before the form can be submitted. This attribute is boolean meaning to use it, it just needs to be present.

If any elements with the required are not filled in when the form is submitted, this will trigger an error with the hint message "This field is required".

Example:

<form>
	<label>
		<span>Your name, please</span>
		<input name="your-name" required />
	</label>

	<button>Submit</button>
</form>

Text length

• minlength attribute - integer, 0 or higher
• maxlength attribute - integer, 0 or higher

Specified the minimum and maximum number of characters an element's value can contain.

If any elements with the minlength attribute are submitted with fewer than the required number of characters, this will trigger an error with the hint message "This field's value must contain at least X characters".

If any elements with the maxlength attribute are submitted with more than the required number of characters, this will trigger an error with the hint message "This field's value must not contain more than X characters".

Example:

<form>
	<label>
		<span>New password:</span>
		<input type="password" name="new-password" minlength="12" />
	</label>
</form>

Value ranges

• min attribute
• max attribute

The min attribute defines the minimum that is acceptable and valid for the input containing the attribute. The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.

Different input types have different minimum/maximum syntaxes.

Examples (from MDN):

Input type	Syntax	Example
date	yyyy-mm-dd	<input type="date" min="2019-12-25" step="1" />
month	yyyy-mm	<input type="month" min="2019-12" step="12" />
week	yyyy-W##	<input type="week" min="2019-W23" step="" />
time	hh:mm	<input type="time" min="09:00" step="900" />
datetime-local	yyyy-mm-ddThh:mm	<input type="datetime-local" min="2019-12-25T19:30" />
number	(number)	<input type="number" min="0" step="5" max="100" />
range	(number)	<input type="range" min="60" step="5" max="100" />

Preset patterns of text

• type attribute

The valid values an <input /> can submit with varies considerably depending on the value of its type attribute. The following is a list of all types specified by the HTML Standard:

• color - a hexadecimal colour value, e.g. #26a5e3
• date - a string representing the date entered in the input. The date is formatted according to ISO8601, e.g. 1955-06-08
• datetime-local - a date string and a time string concatenated together with either the letter "T" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone, e.g. 1993-04-30 17:55:00 or 1993-04-30T17:55:00
• email - a string which is automatically validated as conforming to email syntax, e.g. [email protected]
• month - a string representing the value of the month and year entered into the input, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month), e.g. 1970-01
• number - a number representing the value of the number entered into the input, in accordance to the other attributes of the input, such as min, max, step, etc. e.g. 105, 3.14159 or -459.67
• range - this is validated in the same was as number
• tel - a string that represents a phone number, e.g. 123-456-7890
• time - a string containing the value of the time entered into the input, e.g. 12:50
• url - a string which is automatically validated as conforming to URL syntax, e.g. https://www.php.gt/DomValidation
• week - a string representing a year plus the ISO8601 week number, e.g. 1948-W53

Custom patterns can be entered using the pattern type as explained in the next section. Any other type is validated as text.

Custom regular expression patterns

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.

The attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation. The "u" flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

Example:

<form>
	<label>
		<span>Username: (3-16 characters)</span>
		<input name="username" type="text" pattern="\w{3,16}" required />
	</label>
	<label>
		<span>PIN: (4 digits)</span>
		<input name="pin" type="password" pattern="\d{4,4}" required />
	</label>
</form>

---

Next, learn how to start using the library by enforcing validation on user input.