All language subtitles for 10. Using TextFields - Validation Continued

The name and the message values are actually even easier to validate because I can't make sure that

you're spelling your name right or that you've put in the correct message because obviously I have no

idea what either of those things will be but I can go ahead and validate that you put a value in there

to just make sure that there's something there and that'll be good enough validation for me.

But we're not actually going to put the error on the name or the message but what we can do instead

is to change the validity of our Send Message button.

So what we can do is our buttons have a disabled prop and so if I go ahead and save this as true you'll

see the button is disabled is great out and I cannot click it.

So if we go ahead and reset this to check to see whether or not we have errors in any of the above text

fields well then we can return true for this and make sure that they can't go ahead and send a message

unless all of the fields are valid.

So this is an extra way of doing validation.

And I think it works nicely here especially for the name and the message fields where we don't really

need to display an actual error to the user but we can check to see if the name dot length is equal

to zero.

So if there's no name at all then this would return true or if the message down length is equal to zero.

Well then we would return true as well because we don't want an empty message or if the phone helper

dog length is not equal to zero.

And this is the same check that we had used above then this would be true or if the email helper dog

length is not equal to zero.

Well then we would want to return true as well.

So this makes sure that all four of our inputs are valid before we can even send the message.

So if we go ahead and save this now it will refresh then you can see the button starts off as being

greyed out and disabled.

You can't press it.

So if we go in and I type in a name and then an email

and then a phone number you can see it still is not enabled.

We still cannot press it until I go ahead and type in a message and as soon as I have a character in

here to make that message not zero the button becomes possible.

You can see if I put in a message here I'll go ahead and I mess up any of the other fields so I'd get

rid of the name.

Well now you can't send the message again.

So you got to have a name.

And then the email if we go ahead and make it an invalid e-mail that will no longer allow us to send

the message as well as displaying the error and the same way that the phone if we go ahead and get rid

of that you see it's invalid and we can no longer send a message.

And here there's a space in there.

Let's go and get rid of that and you can see as soon as all four of these values are valid then we can

go ahead and press the send message button.

So that's our layer of security and validation to make sure that the message cannot even be sent without

the correct values being in place.

The last thing I want to do real quick is go ahead and add links to these sections up here.

The phone number and the email so that when you click them and you're on a mobile device or even on

the browser here it will actually pop up and allow you to either call a number directly on your phone

or open up your e-mail client and send the e-mail message automatically.

So those are two things that people really like to see and makes it really easy for your mobile users

to get in touch with you.

So what we'll do is we'll scroll up here to where we have the typography wrapping our e-mail and we're

going to wrap this in a tariff and set that equal to the string mailed to Colon and then the e-mail

address.

So Zachary at g mail dot com but then we can come and close this and then we'll need to add a closing

slash a tag.

All right.

And then we can come up and we'll wrap our phone number in a Harith set equal to the string.

Tell colon and then the phone numbers so 5 5 5 5 5 5 5 5 5 5 and then we'll go ahead and close this

and then we can add our closing a tag loops don't need the airplane just to a.

And now if we go ahead and save that you'll see the page refresh.

But now they're actually styled as links.

We definitely don't want that.

So on our a tag go ahead and add a style of text decoration none and then color inherit and I'll make

sure that it retains the blue color and get rid of that underline and let's go ahead and copy that whole

style property and paste that onto the email.

So save that and you can see now they are returned to normal but there are still links and if I go ahead

and I click on this you can see it actually will set up to make a call.

And then if I click on this it will go ahead and open up my email provider which on the Mac this is

the built in mail app.

And if you're on a mobile device that'll go ahead and it will open up the mobile e-mail app and automatically

have these send e-mail in place.

So those are two nice little extras that definitely make it work better and they look better on mobile

devices and for all your devices in general and is definitely a cool little feature that people just

expect to see when you and you see a phone number on the mobile site you just expect to be able to click

it and be able to call it right there.

So that's a nice little trick.

All it takes is the a hair off with the Tel prefix for your hair if so tell colon and then your phone

number and email the mail to call and your email.

So that's it.

And we've got our validation set up.

It was a little bit of work but thankfully regex makes it really easy to test the value and all we really

had to do was set up the system to make sure that our error helpers were set at the correct time.

Which leads to our error states being true or false.

And that's really all there is to validation with the material UI text field.