Form Validation

Text Pattern Validation

Pattern Validation Tests

HTML5 has built-in pattern validation on INPUT fields which is based on regex.

  • - May have some limitations around lookahead and lookbehind.
  • + Recruits the browser in data validation, without script. Works with javascript disabled.
  • + Easy to add to any field
  • > - But regex's are inherently difficult to get right.
  • Tips
  • > Avoid leading ^ and trailing $, as a pattern string is already applied to the full string.
  • > HTML attribute-encode your string before pasting it into the value.
  • https://codepen.io/memetican/pen/RwyMjNp/b7c89c63a4d0298507a33eb3e877975e
  • ‍

Try it out.

Choose your input field configuration, and then test input. Green will be considered valid, Red is considered invalid.

These settings not yet implemented.
Field type:
Field size:
Field required:
This part is implemented.
Field instructions ( will show on error ):
This part is implemented.
Edits here to the regex are instantly applied to the test field below.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Enter your test input data here.
Field will be green if it's considered valid, and will be red if it's considered invalid.
Note that empty strings are valid, because this field is not marked as required.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.