Original subtitles

In this lecture, we're going to focus on validating the email, the process is the same as before as

an exercise.

Try validating the email field.

Be sure to output a message.

If there's an error below the input field, refer to the documentation for the list of rules available.

Don't feel pressure to use as many rules as you can.

Keep it simple and use what you think is right.

Pause the video and good luck.

Welcome back.

If you are able to validate the email field, then congrats.

If not, that's fine as well.

Let's go over it together, open the authentication component, file in the template, search for the

email field.

The first step is to convert the input into the field component will change the input element to the

field component.

The field component will output an input element next will give the input a name, will set the name

to email.

Afterward, we'll give the input some rules or using a validation schema to list our rules.

Scroll down to the schema object in the data function, the rules will be the following required minimum

set, two, three, maximum set to one hundred email.

Or using the same rules we use for the name field, except for the Alpha Space's rule, emails typically

don't have spaces.

You're not required to set these rules in any particular order.

I prefer to set the required rule first because I think it's worth checking before any other rule.

I'm introducing a new rule called email.

It will check if the input is a valid email, however, will receive an error because we haven't registered

it.

Let's register it as a rule.

Open the validation file.

We won't have to create an email rule because we validate comes with one, we can import the email function

from the Validate Rules package.

And our install method we can call the defined function will set the name to email with the email function.

After registering the rule, we can use it in our component, we've already listed it as a rule for

the email field, we can move on to the final step, which is to output the error, switch back to the

authentication component file below the field component.

We're going to add the error message component.

We'll add the text, read six hundred class to change the text, color to read.

Lastly, will set the name property to email.

We're finished.

Let's switch over to the browser to test if it works.

Check the console for any errors, there shouldn't be any after confirming there are no errors, try

and testing the registration email field.

And air will appear if you try entering an invalid email, validate, considers an email valid if it

has the at symbol with the domain extension at the end.

If I were to input test at test dotcom, then that will result in a successful validation.

We've successfully validated the email field.

Let's move on to the other fields in the next one.