Original subtitles

We've almost finished validating the form the next two fields are the country and terms of service fields.

One is a dropdown and the other is a checkbox.

Fortunately, even though they're are different elements, the process of validating them is still the

same.

In this lecture, we'll take the time to explore more rules and scenarios you may run into when validating

a form.

Let's start with the country fields in the template search for the select element in the form it'll

be.

A dropdown for a list of countries will change the select element to the the field component.

The element the field component will generate will be an input element, we want to override this behavior.

We can change the name of the tag by adding the as an attribute to the component will set this to select.

This value will generate the desired tank inside the contents of the component we're passing in, the

options for the dropdown validate will take care of passing these on to the select element.

We don't need to modify the contents of the component.

The next thing we'll do is assign a name to the component will set the name attribute to country.

We can work on the rules next, the advantage to using a dropdown is limiting the possible choices.

We don't have to worry about formatting.

That makes things easier because we don't have to add as many rules.

We don't need to worry about a minimum or maximum character length.

This makes things straightforward.

We'll want to add the required rule because we want the user to make a choice in the schema.

Data object will update the rules for the country.

Fields will set it to required.

Lastly, we'll deal with the error, we'll use the same HTML we used for the other error messages,

copy the error message component from any of the other inputs, paste it below the dropdown of countries.

Will update the name attribute to country.

The country field is pretty much ready, it's not very interesting, let's add a special rule for excluding

a specific value for fun.

Let's say sometime in the future you may want to prevent an option from being selected.

For example, let's say a problem occurs in a country on this list.

A new law or regulation has been passed that prevents us from providing service to that country.

In the meantime, you need to prevent users from this country from registering.

We can add a rule that will prevent users from registering if they select a certain option.

Let's add a new option to the dropdown called Antarctica.

I'm well aware that Antarctica is a continent and not a country where adding in as an example of a location

we can't provide service to if the user selects Antarctica, will want to let the user know that they

can't select that option.

First, we'll need to register the rule, open the validation file.

The rule will want to import is called not one of.

It's a weird name I prefer to rename it to Excluded for a better description of the rule.

Then we'll register the rule by calling the define rule function.

The excluded rule will check if the value is in the list of invalid values, if it is, it'll throw

an error switch back to the authentication component file.

We're going to add the excluded rule, the option is the list of values, the input must not match.

We'll add Antarctica.

This rule will assume every value as a string, if you want to add more invalid values, you can separate

them with the comma.

We're almost finished.

The very last field is a checkbox validating a checkboxes, relatively simple.

Unlike the other input fields, we don't have to worry about validating the value because it's predetermines.

The only thing we need to check for is if it's ticked.

We want users to agree to the terms of service before registering.

Let's go over to the checkbox in our form will convert the input element to a field component.

Another attribute we have to set it, the name attribute will set it to toss.

One last thing we need to add a value to the check box, if it's ticked, will set the value attribute

to one.

By default, the field component will use undefined as the value we want to make sure there's a value,

otherwise any rules we add will always be broken.

Let's work on adding some rules in the schema.

Object will add the required rule to the Topsfield.

The last thing we'll work on is the error, it'll be the same procedure, we'll go back to the template.

We'll need to copy and paste the same error message we had for the other inputs.

I'll grab it from the other inputs.

Lastly, will update the expression to toss.

That will finish things up.

There aren't any more fields we need to validate, let's test the validations we created for the two

fields.

Switching to the browser will check the console for any errors.

There aren't any errors so far.

Next, I'll test the country field by default, it won't have an initial value.

If I were to change the value to Mexico or Germany, then nothing happens.

However, changing it to Antarctica will break the excluded rule.

It'll output an error.

This is the exact behavior we were looking for.

As for the terms of service, the error doesn't appear even though it's required.

Validation is not performed until the input has been touched.

The default behavior is fine.

This is because the form component will force validation on submission, will learn how that works when

we start working on form submission for now, will test the checkbox by checking it and then uncheck

it.

The rule is being enforced, our form is completely validated now that we validated every input field,

we can move on to the next step by default, validations are not performed until the input fields have

been touched.

In some cases, a user can accidentally skip a field and submit the form.

Any fields that were skipped will not be validated.

We don't want that.

We want the validation to be performed and informed the user.

When that happens, that's what we'll be doing in the next lecture.

When you're ready, I'll see you there.