Validating Input

Validating input is also super important. Now you start filling out a form and you do stuff, and sometimes you just type something that is not correct. You mistype your email address, you enter some ID and it's not long enough.

your form should be able to say like, hey, this is likely wrong input.

Please correct that.

And that's what validation is for.

And there are a couple of ways to do that.

What this page shows is the built-in browser validation, and that's quite okay.

But there are better ways to do that.

For example, one of the things is, well, I just show it.

Why talk in the abstract when I can talk in the concrete, I guess.

Don't talk in concrete, kids.

Okay, so if I press submit here, it should show, please fill out this field, which is great.

But it is also like a thing that comes from the browser and then it just disappears at some point.

So I press submit again.

Please fill out this field and it goes away after a couple of seconds.

Now, if you have a small form like this, probably OK.

If you have something longer, people might just not see it.

And you can do that by adding required to the input.

And that will also in addition announce that this input field is required, which is a good thing.

And you should do that if I put in my name or, well, that's not my name, but if I put in anything

and press submit, you know, it does actually submit it. And then we get back to the tutorial.

So, yeah, so you can use those to validate common things. So here we have a couple of different inputs and that might also be interesting for you.

So as you can see, there are different things and this is all normal HTML input.

Um, so for example, here we have an email input field.

If I do, uh, fake, Hey, if, which is not a real thing and then press submit, it will

say, please include an ad in the email address.

This is missing an ad.

If I put an ad at the end, I will press submit, please end up part following the ad.

So it is even like intelligent enough to do that.

But then if we add more text there, it will just submit because that's how the email validation here works.

Oh, they are not marked as required.

That's why it's reloading.

So that's how email works.

So I will pretend we have an email.

Now for website, if I go and put in Yatil.net, it's a website, right?

If I press submit, no, I have to enter a URL.

And that's like where you see like, oh, this is like a terrible error description.

Because what they really want me to do is to put in the HTTP colon double slash before the Yatil.net.

And then this would work.

And we have number, and of course if you put in like an A, now I press A on the keyboard

and it does nothing.

So this is how it's supposed to be.

So you can't submit something that's not a number, you would think.

And you get these like little buttons, these are actually in ten increments.

And I think if I put in five, it should complain about that maybe? Yes. So please enter a valid value. The two nearest valid values are zero and ten. So if I go six and press submit, yeah, it also does zero and ten as the nearest value.

So you get this information because I've constrained this to those things and I get the answer. Is this message, how long it is there, enough to read it? Probably not.

Yeah, but I can also put other stuff in here like E, which is, you know, the Euler's Zahl, the Euler number, I guess.

I can also put probably pi in here.

I don't know how I would do that off the top of my head.

But yeah, you can also put non-number numbers in here.

But this is constrained to these numbers.

that I set like every 10 things. Then we have range here, we have the slider and

that works also with the keyboard so this is left and right arrow key up and

down arrow key which works nice. Don't think there's constraint on that. Nope,

You just do it and then you're back here. We have a date. So this is the date input. So this makes,

just make sure that you can't enter something that's not a date at all. So, but I can still say

four, five, six, 12, 12, 12, 12, stuff like that. And there is even a calendar and in some browsers,

those calendars are accessible and others they are not. Here you can really nicely go through

this chromium so that works well. You can have like 10, 30 here and you can even have like this

time selector. My brain was like date selector, date selector, date selector, but it's a time

selector. So super useful. And that prevents basically users from making bad decisions.

So you want to do that. You always have to verify it on the server side as well,

because I can go into the HTML and just change anything. Like this now says 1935 and I

I couldn't change that, but if I go into here and into there, and then I can go basically into this.

And can then say value test and press return.

And then the test value would be sent to the server.

Like if I remove input time and say text, then it will be revealed.

Should have been.

Oh, that counts as changed, I guess.

So yeah, but you can do manipulations like that.

And so you always have to also test it on the back end and then throw errors to the user if something is wrong.

Yeah.

Oh, yeah.

And this is like a super, super fun little example.

So in this case, this is about German license plate numbers.

And you can have these patterns, which are regular expressions, which if you don't know what that is, regular expressions is basically a syntax to say like, okay, I want to search for something.

I define a pattern and then I can search things in that pattern.

So in this case, it says like from A to Z is allowed and then Ö, E and Ü.

So the umlauts for A, O and U.

And between one and three times.

So that's basically what this means.

And then there must be a space.

And then we have A to Z for two to four times.

So one time A to Z is not enough.

And then we have zero to nine.

So number between one and four times.

Theoretically, you could say, oh, and optionally, there's an E at the end, because that would be for electro cars.

They would have that.

But so you can actually validate stuff like that.

So you can say, so if I have, let's say, PSAB123, this would be a valid thing because it has two here, two here, and then three numbers here.

But if I go 56, it says, please match the requested format.

Now, this doesn't tell you what the requested format is.

You have to know that.

So for the city, I could do like, if I do like Cologne, and I don't know what the city thing is, you could Cologne, Cologne, which is obviously for, which is not allowed.

So we'll also complain.

But if you go CG, that will work.

CG is not the number plate of Cologne, that's just a K. I know that.

Yeah, but that's a fun thing where you can be like, oh, how is this supposed to be working?

And then you can at least give your users a little bit more information.

Now, you should always be forgiving to different input formats.

So, for example, if you have a credit card number input, you might theoretically have like 12 numbers and you want to have them in four packs with a space in between.

But maybe a user wants to put dashes in between or wants to just write them out in one line, then they should be able to do that.

Same goes for phone numbers.

Don't say like, oh, you have to put brackets here and spaces there.

That's all like, that's not useful for you.

Well, it might be useful for you, but it's not useful for your user.

And you can always on the backend reformat it when you output it.

So don't, you know, don't do that.

Yeah, and in general, you want to do the client-side validation, which is these like,

hey, you know, change your format and enter the right thing, something like that, because it's

immediate and it gives you the immediate feedback. And we will talk about ARIA Live

next week and that will have a lot of like other things, how you can get this immediate feedback to

users. And of course, you will also want users to check their input. So if you can delete something,

you want to have a, do you really want to delete this? You know, something like that. You want to

give undo functionality. That's one way to address that as well, is to allow just deletion,

but then you have like a trash can where you can claw stuff back if you need to.

And, and yeah, and these are like important principles just to make sure that users don't

do anything that is that is bad for them. And especially if it's destructive, like deleting

something, you always want, you know, to have a net and, and make sure that it doesn't happen just,

you know, in a click and then the user is like sad, they have to phone you and then you go like,

I can't do anything because I don't have any backups for this or something like that. You

know, you don't want that to happen. So you always want to confirm with the user that this is really

the action they want to do.

Thank you.