What

HTML5 input patterns are a way of adding simple validation rules using regexp directly in the form field.

Why

HTML5 input patterns just like the required attribute are checked immediately and not on submit so they provide instant feedback. This not only reduces calls to the server but also improves the usability and accessibility of the form.

Joomla Support

Input patterns are supported by the Joomla text field but they should also be supported by search, tel, url, email, and password fields.

J4 has partial support for custom validation messages but is not using the specification for the value in the xml

Finally although Joomla supports this in the text fields so it will work in a field defined in an xml file there is no UI to be able to use this in a custom field.

Supported in the core

J3 - supports patterns but not custom validation message

https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/form/field/text.php#L75

J4 - supports patterns and partial (non-standard) validation message

https://github.com/joomla/joomla-cms/blob/4.0-dev/layouts/joomla/form/field/text.php#L72

Already being used

See media-action-crop plugin in J4

Specification

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u'parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern

Support

Supported by all browsers see https://caniuse.com/#feat=input-pattern

Basic usage

Add [a-z]{1,15} as the value of the pattern attribute in our username input:

<input
       type="text"
       name="username"
       placeholder="Username"
       pattern="[a-z]{1,15}”>

Now, since it only accepts lowercase letters, submitting any other value will throw an error message immediately

Customising the Validation Message

We can customise the message to be more helpful by specifying a title attribute within our input element:

    <input
        type="text"
        name="username"
        placeholder="Username"
        pattern="[a-z]{1,15}"
        title="Username should only contain lowercase letters. e.g. john">

Now the title is included along with the default message:

Example Patterns

See http://html5pattern.com/