The pattern attribute

The pattern attribute is a form validation attribute that is used to validate the value of an input field against a regular expression. Regular expressions are used for advanced pattern matching of text strings. The pattern attribute’s regular expression is written using the same syntax available to a JavaScript RegExp pattern, but with the global, ignoreCase, and multiline options disabled.

Syntax:

<input type="text" pattern="^[A-Za-z0-9]+$" />

Elements:

<input />

NOTE: the validation triggered by the pattern attribute can be bypassed through the use of the novalidate or formnovalidate attributes.

Information on writing regular expressions can be found at:

http://brenkoweb.com/tutorials/javascript/js-regular-expressions

Example

The example with patter attribute:

<!DOCTYPE html>
<html>

<body>
    
<p>This example did not use &lt;input type="email" /&gt; on purpose. Instead it validated it with the <i><strong>pattern</strong> attribute.</i></p>
<p>Try clicking submit with non-email values:</p>

<form action="#" method="get">
   <p>
    <label for="email">Email Address:</label>
    <input type="text" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

<h5>p.s. submitting the form will not generate any action</h5>

</body>
</html>

›› go to examples ››

The pattern attribute

Syntax:

Elements:

Example

The example with patter attribute:

Comments

About

Contact

Get Connected