Text field validation regex

Advanced Product Fields for WooCommerce includes fields and settings that offer restrictions on the expected input from your customer. if you require a number, you would use the “number” field. If you need text, you would use the “text” or “text area” field. The plugin also has a “URL” field, an “Email” field, and a “date” field which all come with their own set of rules of which characters are allowed/needed. Furthermore, you can set the minimum and maximum allowed character/number count.

Sometimes, this may not be enough validation. Perhaps you need custom validation of a phone number, password, ID card number, or anything else.

The text field has a “validation regex” setting which allows you to add custom validation.

HTML5 validation regex

Validation is achieved using a regular expression, which is a string of characters and symbols that defines a search pattern. 

For example, let’s say you have an input element where you want customers to enter a username. And the rule for usernames is that they must be made up of alphanumeric characters and underscores. They also must be between 5 and 20 characters long. 

The following is a regular expression you could add to your Input element so that it only accepts valid usernames:

^[a-zA-Z0-9_]{5,20}$

In this expression, the ^ and $ represent the beginning and end of the string, respectively. Inside of those symbols are two sections, one enclosed in square brackets [] and the other in curly braces {}. The section enclosed in square brackets [a-zA-Z0-9_] matches lowercase letters a-z, uppercase letters A-Z, numbers 0-9, or underscores _. The section enclosed in curly braces {5,20} means you want between 5 and 20 characters that match the section that immediately preceded it, namely [a-zA-Z0-9_].

Here is a site that offers some regex examples.

Was this article helpful?

Related Articles