Form Validation (required and pattern)

In this lesson you'll learn the basics of form validation using required and pattern, so you can perform input checking without JavaScript. This is for people searching "HTML form validation."

Adding the required attribute makes an input mandatory, and the pattern attribute lets you only allow input matching a regular expression. This is a "gatekeeper for input" feature the browser handles automatically, without needing to write any JavaScript.

The sample code specifies required on the name field, and a regular expression, pattern="\d{3}-\d{4}", on the ZIP code field. Try actually pressing the submit button, and confirm how the browser automatically shows a warning message for input that doesn't meet the condition.

A common beginner stumbling block is that this kind of standard HTML validation alone isn't enough as a real-world security measure. Browser-side checks can easily be bypassed, so the server side must always perform the same kind of input validation too.

A lot of the behavior where a signup form won't submit because an email address is in the wrong format comes down to this mechanism. Since it can prevent a user's input mistakes on the spot, this is essential basic knowledge for building an easy-to-use form.