Original subtitles

In this lecture, we're going to continue validating the fields in the form the next field in the form

is the age.

A lot of this will be similar to before.

So let's jump right into it.

We'll be working in the authentication component file in this component search for the age, input in

the template.

It's below the field for the email will change the input element to the field component.

One thing you'll notice is that we have the type attribute set to no, the type attribute for the email

is also being set validate will modify the type of the input element it generates.

This is why we don't have to remove or do anything else to get the desired type.

The attributes are passed onto the element the component generates.

The next thing we'll do is set the name of the field by setting the name attribute to age.

Keep in mind, the names we're using on our fields should correspond to the names we're using in the

validation schema.

This is how Validate will know where to enforce the rules.

Speaking of the validation schema, let's scroll down to the object to add some rules.

In some instances, you may want to have a minimum age requirement, the minimum rule will not work

in this scenario.

It'll consider non numeric characters to be valid.

We want the rule to validate numeric values.

Only any non numeric character should throw an error.

There's an alternative rule available called minimum value.

It'll check if the input is numeric and doesn't fall below a specific number.

We'll need to import and register it.

Open the validation file.

In the import statement for the rules, import the minimum value rule object, we're going to assign

it an alias called minimum value.

This alias is to prevent Lynch from throwing an error because the minimum value rule uses underscores

underscores for important teams were not allowed.

While we're here, we're going to import another rule called maximum value with an alias of maximum

value.

We'll want to make sure no one is registering with the ridiculous age like three hundred, adding a

rule for checking for a maximum value will help us with that.

Let's register the rules called the define rule function twice for both rules we imported.

We're going to keep the underscore characters and their names intact for consistency.

We don't need to import any more rules, these will suffice for the age, if you would like to add more

rules, then go ahead, switch back to the authentication component file.

We'll add the following rules to the field required minimum value, maximum value.

The minimum and maximum rules allow us to set the thresholds for the minimum value rule will set it

to 18.

We want users who are 18 years or older.

The maximum value rule will be set to one hundred.

Some people are over 100 years old.

This is just an example.

Feel free to bump it up.

Let's move on to handling the error.

Scroll back up to the AIDS field.

We'll copy the markup we used for the other errors.

We'll copy the error message component from the email field and paste it below the age input field.

We'll need to update the expression to output the error for the age.

At this point, we're repeating the same thing, however, it does give us the opportunity to explore

different rules.

Let's verify that the age field is being validated.

Switch over to the Rouzer.

All attempts to break the rule for non numeric characters.

We will receive an error.

Next will test the rules for when a value is outside the bounds of the range we set.

Another error, great, the age validation is working like we wanted in the next lecture, we'll work

on the password fields.