How to validate email in the HTML form
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:
Cool, isn’t it?
But also understand that we shouldn’t just rely on these validations, this is just the first layer
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.
Then we will be more protected from malicious users
Want to learn more about HTML? Click here!