All language subtitles for 003 Validation Components_en

Validate is ready to go.

It's time to validate the input fields in this lecture.

We're going to start using the components we registered previously.

I'm using the model we've prepared in the previous section.

There are two forms which are the login and registration forms.

We're going to begin with validating the registration form.

The form will have additional fields that normally wouldn't appear on a registration form.

At the very least, you'll usually ask for the email, username and password.

I decided to add additional fields for demonstration purposes.

It'll give us the opportunity to look at how we would validate various types of input fields.

Now that we have an overview of things, let's begin switch over to the editor inside the authentication

component search for the registration form.

There's a comment about the form that says registration form.

If you want, you can fold the login form to better focus on the registration form.

We won't be dealing with the login form for a while.

The very first field in the form is for the name, it's a TextField with no unique attributes.

The objective of this lecture is to validate this field.

We're going to use one rule.

We want to make the name a required field.

There's already an HTML5 attribute called required that prevents a form from being submitted.

If a field is left empty, that's an option, but we won't be using it.

We'll want to use validate because it'll give us better control over the error.

The first step is to replace the form element for the registration form with the V form component.

The job of the V form component is to organize a set of validations in a form we'll be able to globally

control the form with this component.

It'll help us verify if every input field in the form is valid, the form component will generate a

tag that will wrap the component by default.

It'll use a form tag.

This is why we can safely replace the form element with the V form component.

The thing we want to validate specifically is the value from the input field.

By default, VALIDATE doesn't perform validation on any of the elements placed inside it.

We need to tell it which input should be validated explicitly.

We can tell it by using the V field component we registered in the previous lecture will start with

the input for the name.

It's the first input in the form will change the input element with the V field component.

The field component is responsible for validating a single input, it'll generate an input tag by default.

It's safe to replace the input element with this component.

If we want to override the element it generates, we can add an attribute called AS.

The value for this attribute is the name of the tag we want the component to generate.

For example, if we want to generate a select element, we can pass and select.

The original tag was an input tag.

So we'll remove this attribute.

We don't need it.

In the resource section of this lecture, I provide a link to the field component documentation page.

If we scroll down, we'll come across a section called Properties, it's a list of properties we can

add to the component to modify its behavior.

On this list, you'll find a property called as the as property is the name of the tag.

The component will output the default tag as input.

It's always a good idea to check with the documentation of the libraries we're using to check what we'll

get rendered.

Let's go back to our editor.

It's not documented, but any attributes you add to the component are automatically added to the element,

the component outputs.

As long as it's not an official property for the component, it's passively added to the element.

We don't need to worry about reapplying the class attribute to the input.

The next thing we can start doing is tell the validate how it should validate the input.

There are four steps for validating the input.

The first step is to replace the input with the field component.

We already did that.

The second step is to assign a name to the input we're going to be validating multiple inputs.

Validate needs a way to identify each input.

We'll look at how to do that in a moment.

The third step is to add the rules.

The rules refer to a list of criteria of value must meet for it to be considered valid.

Lastly, we need a way to handle errors if the user's input does not pass any of the rules.

It's important we give feedback to the user to let them know how they can fix their errors.

We're back in the ed we're going to handle assigning a unique identifier to the input it'll help validate,

understand our form better, we can add an identifier by adding the name attribute to the field component

will set the name to name.

We'll move on to the next step, which is to add some rules.

We'll look at registering rules in the next lecture.