Form Validation

You just built a complete contact form. That felt great. But here is something worth thinking about.

What stops someone from typing "aaaaaa" into the email field and clicking Send? Or leaving every single field blank and submitting anyway? Right now, nothing. The form would happily accept garbage and there would be nothing you could do about it.

That is where form validation comes in. Validation means checking that the user filled out the form correctly before the data gets sent anywhere. And the good news is that HTML does a lot of this for you with almost no extra work on your part.

Let us walk through it together.

The required Attribute

The simplest and most important validation tool you have is the required attribute. When you add it to any input, the browser will refuse to submit the form if that field is empty. The user will get an error message automatically, right on the page, without you writing a single line of extra code.

Here is how you add it.

That one word, required, is doing all the work. Try to submit the form without filling that field in and the browser stops you cold and points right at the empty field.

You can add required to text inputs, email inputs, textareas, dropdowns, checkboxes, and radio buttons. Basically anything the user needs to fill in before submitting.

Email Validation is Already Built In

You actually already got this one for free in the last lesson. When you use type="email", the browser automatically checks that what the user typed looks like a valid email address. No @ symbol? The form will not submit and the browser tells the user exactly what went wrong.

Notice that combining type="email" with required means the field has to be filled in AND it has to be a valid email. That is two validations with just two attributes. Pretty efficient.

The minlength and maxlength Attributes

Sometimes you need the user to type a minimum amount. A password that is at least 8 characters. A username that is at least 3 characters. That kind of thing.

minlength sets the minimum number of characters the field will accept. maxlength sets the maximum.

With maxlength, the browser physically stops the user from typing past the limit. The input just stops accepting characters. With minlength, the browser waits until the user tries to submit and then flags it if the input is too short.

Number Inputs with min and max

If you have a number field, you can set a floor and a ceiling on the values allowed.

min and max do exactly what they sound like. The user cannot submit a number below the minimum or above the maximum. This is great for things like ages, quantities, scores, or any other number that has to fall within a sensible range.

The pattern Attribute

This one is a bit more advanced but worth knowing about. pattern lets you define a rule that the input has to match, written as something called a regular expression.

Do not let that term scare you. Here is a simple example. Say you want a phone number field that only accepts exactly 10 digits and nothing else.

The pattern [0-9]{10} means "exactly 10 characters, each one must be a digit from 0 to 9." If the user types letters or a number with the wrong length, the form will not submit.

Regular expressions have a lot of depth to them and you will pick them up gradually over time. For now just know that pattern exists and you can look up the right expression when you need it.

Giving Users a Helpful Hint with title

When validation fails, the browser shows a generic message. You can make that message more helpful by adding a title attribute. Whatever you write in title gets added to the error message.

Now when someone types their phone number wrong, they get a message that actually explains what went wrong in plain English. Your users will appreciate that.

Putting It All Together

Here is a form that uses everything you just learned. Read through each field and see if you can spot which validation attributes are doing what.

Every field has at least one layer of protection. The name has to be at least 2 characters. The email has to look like a real email. The age has to be between 18 and 99. The phone has to match the pattern. The message has to be at least 10 characters. None of these required any JavaScript. Just HTML attributes.