All language subtitles for 9. Using TextFields - Validation

Now that are contact us section is styled properly.

We can go ahead and start working on the actual inputs and we're going to go ahead and validate that

these four inputs have only valid values and what's come down in the code.

Editor in contact at DOT J.S. and we'll scroll down to where we have the text field components and if

you remember from the documentation we have the error prop available to us if I go ahead and on the

name text field.

I'll go ahead and just add the error prop as it is and that will default it to true.

So if I go ahead and save that you'll see the page refresh.

And now we have the red error styled input when we have an error.

We'd also like to go ahead and give them a little information about why the error is occurring and we

can do that using the helper text prop and if we go ahead and set this equal to a string like Please

enter a name go ahead and save that and you'll see the page refresh.

And now it's got a little bit of text underneath the input telling you why the error is occurring.

All right.

But one thing to note here with the help or text is if I go ahead and remove the arrow prop and go ahead

and save the file once the page refreshes you'll see that the helper text is still there it is just

not receiving the error styles.

So I would actually like to only apply the helper text if there is an error.

So I'll go ahead and get rid of the helper text.

Go ahead and save that.

So it goes back to normal and we can begin our approach for this.

So what we're going to do is we'll come up to the top and underneath where we're creating the constants

for our message and phone name and email.

Let's go ahead and underneath the name will create a constant of name helper and asset name helper.

And then we'll use state with the default of empty string.

We can go ahead and let's copy this.

We're going to paste that here.

Go ahead paste it there and paste this as well.

And now let's go and change each of these to the email helper and then the set email helper phone helper

and the set phone helper and then the message helper and set message helper.

So now what I'm going to do is instead of having the en change function for each of these text fields

simply taking the event and calling the appropriate set state value for whichever value it is whether

that's the set message cell phone or whatever set value and then it simply passes in the value.

Well instead of just automatically passing the value into our state let's go ahead and we can actually

define a function that we're going to run to check that value.

And if we do that we can then determine whether or not that input is currently valid and if it is then

we will have the regular styles but if it isn't then we can go ahead and set the error styling along

with the help or text and then the error styles will continue to be on that input until the input changes

to a value that is actually valid so let's scroll back up and I actually remembered.

So we will not need a message helper.

Go ahead and delete that or name helper.

You can go ahead and delete that too.

We'll actually use a little trick from the way that this is set up already so that we won't even need

to use that.

But for the email and phone we will need those helpers.

But let's go underneath the message constant and let's add a constant of on change.

And this will be called within event and will then fire an arrow function.

And here we can let there be a local variable called error.

Then we can put a semicolon.

And now we're going to switch over the event dot target dot I.D. so not the target value but Target

dot I.D..

All right.

And let's open this up.

But if you come down and look where this idea is coming from the I.D. that we are setting on these texts

fields.

So when the event fires is fired along with the I.D. of whichever field is currently firing that change

event.

And so we're going to switch over the I.D. to figure out whether we're on the e-mail or the phone text

field so we're going to switch over that I.D. and in the case that we have the I.D. of email we'll open

this up and we'll come down and we'll first actually set the e-mail to the event dot target dot value

because we actually want to make sure that the text is popping up on the screen before we do the validation

for it.

So then we can come underneath there and now we need to think about how we're actually going to validate

this value.

How do you make sure that you have a valid e-mail well a very easy way to do this here in Javascript

is to use a reg x test and that is short for a regular expression.

And that is essentially a function that defines a set of characters in a string that match a certain

pattern.

So this is exactly what we want to do here.

And I've gone ahead and attached to this video.

So make sure you go ahead and download that a regex tests Dot T X T.

So I'm going to go ahead and open this file up and here you'll see that there is an email section email

and a phone you see underneath each one there's just this string of random looking crazy characters.

So go ahead and copy all of that.

Make sure you get from slash to slash.

Copy that for the email and then it will come into our switch statement.

And here we are going to set error now to be equal to our regex value.

So go ahead and paste that in now paste our whole string in dot test.

So this is a built in function that allows us to test a regular expression on a string so we can go

ahead and then pass in our event dot target dot value and that will go ahead and return a boolean value

based on whether or not the event dot target dot value.

So the text that was just input to our text field whether or not that matches this pattern.

In this case a pattern for a valid e-mail address.

And so we can come underneath this now and if there was an error so open this up and we'll actually

do if there was not an error.

So this will run if error is false.

So if there was not an error then we'll reach this block here because remember this is going to be set

to true if our value passes.

So if this is a valid e-mail error will actually equal to true.

So maybe that's actually a confusing name.

So let's change.

Error.

Let's go ahead and change this to valid or less valid.

So now let's change this change all of those.

OK.

And now this should make more sense because now valid will be true if this is a valid e-mail.

This will return a value of true for this test if it meets the pattern so it will be valid.

And this will return False if it does not meet the pattern so valid will be false.

So if it is not valid.

So if the value is not valid then we would want to set our e-mail helper to the text invalid e-mail.

All right.

And then otherwise so else well then we would go ahead and set e-mail helper to the empty string.

And this is to make sure that once we do finally have a valid e-mail we go ahead and clear out the helper

text because the helper text is actually going to determine whether or not the error styling is applied.

But we need to come underneath this if block and add a break statement and then let's come underneath

the break statement and add a default case where we also just break.

All right.

But we're not finished yet.

Go ahead remove the empty line because we need to add the case for if we have the event dot target dot

I.D. of phone.

So if we were on the phone text field then we're going to want to set our phone to the event targets

dot value to make sure that our text field is updated and then we will set the valid variable this time

equal.

We'll go over to the rejects tests to don t x t that is attached to this video and go ahead and copy

that rejects value and they'll come over to the code we'll paste that in.

And again we will dot test the event dot target dot value and this will now return true if we have a

valid phone number.

Otherwise it will return false invalid it will be false so we can then come and check if not valid then

we will set the phone helper.

Now two in valid phone and then otherwise else we will set the phone helper to the empty string after

that make sure we come down and add a break statement and that switch block should be taken care of.

But now we need to go ahead and set the on change function to our text fields right here for the phone.

On change this is now going to be the on change function and the email will be the on change function

as well.

We're going to change the name and the message text fields here in just a second.

But now on our phone and e-mail text fields.

Here is where the cleverness of this approach comes in because we can come onto our e-mail field and

we can add the error prop but we'll set this equal to some javascript where we'll check the email helper

dot length and if that is not equal to zero Well then this statement will return true.

So if this is not equal to zero.

So if we do indeed have a length any length greater than zero on the email helper.

And remember we're setting the email helper whenever we have a not valid email.

It will set the invalid e-mail text instead of the empty string.

So the empty string it does have a length of zero but once we have some error text in there whenever

there is not a valid e-mail then that error text then has a length greater than zero.

So we can scroll down and here when we're checking if this does not equal 0.

So if this is any value but zero then it must mean that we have some helper text in our state which

means that we must have an invalid email.

So this will then return true.

Setting the error a prop to true and giving us the error styles so we can go ahead and we can copy this

and paste it down onto the phone section as well but make sure to change email helper to phone helper

and we'll do the same thing making sure that that is not equal to zero.

Let's go ahead and save this file now and we can come over to our page and you saw refresh.

And now if we come over to the e-mail you see there's no Stiles yet but as soon as I type into this

you see it goes red.

It looks like our help or text is not showing up though.

And that's because we haven't actually set the help or text props.

So make sure on the email text field we'll set the helper text prop equal to the email helper value

and on our phone text field we'll set the helper text equal to the phone helper value.

So go ahead and save that page will refresh again.

And now if I go ahead you see we don't have any styles yet but if I go ahead and type in you see immediately

we have invalid e-mail pops up as well as the read styles on the text field and I can continue and I'll

type in Zachary at gmail dot com and you see as soon as I have a valid e-mail the error styles goes

away along with our helper text so we can go on the phone and let's start putting in a phone number

you see if I type in any thing but numbers it of course is going to say it's invalid.

But then if I come home we can do 5 5 5 5 5 5 5 5 5 5 and as soon as we have a valid phone number in

there it then goes to being correct.