How to validate email in the HTML form

In this article we will learn how to validate email in the HTML form, in a practical way using an HTML attribute that will run the validation without using JavaScript.

Hey programmer, how are you? Let’s learn something new!

One of the big issues you need from the user data is its integrity.

For this we must do both front-end and back-end validations

Email validation becomes quite complicated as we have several patterns to include in validation

With that in mind the HTML developers programmed a type attribute with the value of email

That validates the data entered in the field, following the standards necessary to have a valid email address, for example the @ present in the text, which is mandatory in an email

Let’s see the code in practice:

<!DOCTYPE html>
 <html>
  <head>
   <title>Como validar e-mail no formulário do HTML</title>
  </head>
 <body>
  <p>Preencha seu e-mail:</p>
  <form>
   <div>
    <input type="email" name="email" required>
   </div>
   <div>
    <input type="submit" value="Enviar">
   </div>
  </form>
 </body>
</html>

We will have the following results:

And also:

Cool, isn’t it?

But also understand that we shouldn’t just rely on these validations, this is just the first layer

The right thing would be to have a JavaScript validation, validating other email patterns, by regex

obs: Regex are regular expressions.

And also another layer in the back-end running the same validations as the front, even if the data was filled.

This way we will be more protected against malicious users, never trust the data received by a user

So here’s the way to validate email in the form, and even in this example there’s the required attribute

Which is also another form of validation, but this one is to say which field is mandatory, not allowing the user to proceed without filling it out.

Conclusion

We saw in this article the possibility of validating emails already in the HTML layer, this is good as it avoids a bit of often complex JavaScript code

But we shouldn’t just take this validation as true, we need to do it in other places, such as: JavaScript and also backend

Then we will be more protected from malicious users

Want to learn more about HTML? Click here!