Original subtitles

In this lecture, we're going to apply the rules we defined to our forms.

Let's use it for our input.

Back in the authentication component, we can enforce a rule on the input by binding an attribute on

the field component called rules.

The value for this must be a list of rules you'd like for the value to be checked against.

We're going to set this property to required.

This is one way of adding a rule to an input.

There's a second way, which is much better.

The template and our component is starting to get cluttered.

We're adding a lot of code to achieve validation.

We can make our template look cleaner by outsourcing the rules to an object.

This is the route we'll be going with will remove the rules attribute from the field component.

On the the form component will bind a property called validation schema.

The validation scheme of property allows us to outsource the rules into an object.

The value for this property must be an object from our components data.

We'll set this property to schema.

This object currently doesn't exist.

Let's add it to our component in the component configuration options.

We'll add the data function.

In the object, we'll define the schema object.

The property name in the object must reference the unique identifier we gave to the input.

This would be the value we used in the name attribute on the field component.

We want to add rules for the name field.

The value for this must be a string with the rules we want to enforce, we'll set this to required.

While we're here, we'll add the other fields.

Since we'll be validating them in upcoming lectures, we'll add the following properties.

Name.

Email.

Age.

Password.

Confirm password.

Country.

Cos.

We aren't going to add rules for all the input at once.

We're just adding these in to save some time in the future.

We've completed the first three steps.

The last step is to handle the error.

If the input is invalidated, we'll want to provide feedback to the user.

There are different ways to handle this.

We're going to output a message below the input for displaying the error.

There's a component for outputting error messages.

It comes with validate.

It's the easiest way for outputting errors.

First, we need to register the component.

Switch over to the validation file.

At the top, we're going to update the import list from the validate package to include a component

called error message.

Next scroll down to the install method, we're going to register the component with the app component

function.

The name of the component will be the same name as the object.

The component we have registered will output an error message.

If there isn't an error message, nothing will get outputted.

That saves us time from having to check if there's an error message.

It's a very simple component.

Let's use it back in the component.

We're going to add the error message component below the field component for the name.

We're going to add a class called Text Red 600.

The error message component will generate a span tag if there's an error.

Any attributes we add to the component?

Will you passed onto the element it generates?

The class we're adding will change the color of the text to read.

The next thing we'll do is tell the validate which error to output.

We'll add a property called name.

Its value should be the name of the field.

It should output errors for the value should correspond to the value we passed into the name property

for the field component.

In this example, we're trying to output the error message for the name we'll pass in name.

Each field will have only one error.

There can be multiple errors for an input, but the error message component will only output one error.

That's perfectly fine.

We don't need to view every error on an individual input.

We're finished.

There are more things we can do, but I think it's time we test the form in the browser.

Open the registration form.

Everything will look normal.

Validation is not performed until the fields have been touched.

If we were to input random text into the name field, we wouldn't receive an error.

Let's see what happens if we were to leave the field empty.

An error will appear below.

By default, the validate generate an error message.

The rules we've imported are functions.

The functions will return either true or false.

We can override this, but we'll get to that in the next few lectures.

For now, the default message will work.