Current section: Form Validation 5 exercises

Form Validation for Accessibility


00:00 To validate this form, we're going to go to where that form lives in our edit route. And then we come down here to our form and we can just provide regular HTML attributes for this. So, both the title and the content are required and the title has a min length or a max length

00:19 max length of 100. We don't want like ridiculously long titles. So, then required on the content and then a max length of 1,000. Now, let's do 10,000. There we go.

00:35 All right. With that now, if I delete this and say submit, then I'm going to get some built-in browser validation that says, hey, this is a required field. And then if I try to type too many characters, eventually, yep, I'm still typing and it's not going to let me.

00:52 Now, of course, the user can still make changes to the DOM themselves. So, they can hit our endpoint directly. But this at least helps protect the user from themselves by disallowing behavior or something that they shouldn't be able to do. And we can enhance this later.

01:08 But the important thing here is that we provide these attributes. It's not just for the client to behave in this way from a validation perspective, but it actually will make an impact on the way that accessibility tools like screen readers will behave when the users are

01:27 interacting with these fields. So, if I turn on the screen reader for this one, then it's going to, yeah, it's going to be super long. Let's get rid of that. So, you see that the first thing it says is required. So, it will tell the user that, hey, this is a required field. So, this is good

01:45 not just for having the browser do the validation for us, but also for screen readers as well.