Original subtitles

We're almost finished with validating the form.

Each individual field has its rules applied to it.

The next thing we'll want to do is validate the entire form if the user attempts to submit it.

If the user attempts to submit an incomplete form, we will need to force validation on inputs before

processing the request.

The way the validate handles validation is by waiting for the inputs to be interacted with.

It will not validate the moment the user lands on the page.

We will need to force validation if the user doesn't trigger the validation on their own.

The validate makes it extremely easy for a forcing validation.

Open the authentication component in your editor.

We're going to be focusing on the form component.

We wrapped around the inputs on the form component.

We'll add an event listener for the submit event.

The summit event is slightly different from the submit event for a forum.

The validate creates its own version of the Submit event.

It'll do two things.

First, it will force the field component placed inside it to perform validation.

This enforcement includes inputs that haven't been touched, if any of the inputs are invalid.

The event will not run the expression.

Second, it'll prevent the page from refreshing upon submission.

We don't need to add the prevent modifier.

It's done for us behind the scenes.

Let's add the function we want to run.

If the forms are valid, we'll pass a new function called register.

We never have to worry about manually checking if the forms are valid.

The register function will not be called if any of the inputs are invalid.

Any untouched fields will have their errors rendered.

This will inform the user of what inputs they need to fix.

The next thing we'll do is define the register function.

Scrolling down will define the register function in the methods object.

If the register function gets called, we know for sure that the values in the form are good to go.

The submit event will provide our function with the values from the field components.

The Root This section.

We never used the the model directive to bind values to our inputs.

It's not necessary to use the V model directive in our form.

The validate comes with its own system for keeping track of the data in the form.

This doesn't mean that the model directive isn't helpful.

However, we don't need the V model directive since the library will keep track of the values for us

inside the register functions parameters will add a parameter called values.

Next, we'll log this parameter.

This log will let us know if the validation was a success.

Let's give this a test.

Refresh the page on the browser.

We want a clean slate.

If you're using a browser that auto fills the input fields, then don't worry about it.

Just empty them out.

Submit the form without inputting anything.

This submission will trigger an error in every field in the console.

We won't see anything because the register function was not called the form component will not run the

register function until the fields are valid.

I'm going to fill up the form with valid values.

If I were to submit the form again, we'd see our values logged in the console.

This is great.

We have a way to prevent the form from being submitted.

If there are any broken rules, we can proceed with submitting the data.

There are some additional optimizations we can make before submitting the data.

We'll look at what else we can do to make the form more user friendly in the upcoming lectures.