 If you've ever used the native form validation that comes with HTML, you'll know it leaves a little bit to be desired, but luckily there's actually some pretty easy ways with a couple of attributes to make it much, much better. Hello my friend and friends and welcome back to yet another video. And if you're new here, my name is Kevin and here at my channel. I help you fall madly, deeply in love with CSS, but today we're actually not doing too much CSS and we're focusing on some HTML. Let's dive right in and take a look at form validation. So here's a simple example that I have set up where if I come in and I put some stuff and I hit submit, I get this please include the at symbol in the address. It's missing that. And if I do that also say you need something after it. And if we keep doing that, well, it actually works. And I don't need like a dot com or something. So that's super, super frustrating at the beginning. And then of course for password validation, there's not a lot the browser knows how to do it out of the box. But we're gonna look at how we can spice this up just a little bit. And so let's start by looking at the password one actually, because it's a little bit easier. And then we'll jump up to the email one that's a little bit more complex. And for this one, we're gonna shrink this down because we're doing a lot of HTML and just really fast. I have these two form groups here inside of form, this my label here, my input. And one thing it's important is I have put both of these as required because if they're not required and it won't give me an error if I try and submit and it's blank. Whereas if I put required, then it will let me submit. It shouldn't allow me to submit if it's blank, please fill out this field because we haven't filled it out. So required on both of them, I have put the type for them. So type email type password that does help us with the default and it also helps us have hitting characters there. Now, as I said, we're gonna start with the password. So the first thing I'm gonna do is remove the required from the email just so I don't have to fill it out every single time we're getting through all of these. And then here on this input, I'm gonna come on this and we're gonna use a pattern here. Now pattern is an interesting attribute that we can use on inputs. Pattern is not available on all inputs, but it is on text, password, email, telephone, search and URL, depending on what you're doing and the type that you have set up. You can use the pattern and it uses red jack switch, scares me and I think is a black magic, but luckily the basic basics of it aren't too bad, which is why we're gonna start here and then we're gonna move up over into the email where things get more complex and we'll get a cool tool that can make it a little bit easier. So the tool that we're gonna start with by looking at this just to help us out is redjacksr.com, I'll link it in the description. And this just makes it a little bit easier because you can put examples here. So let's put in like a password that someone might put in of password 123. So the main reason I'm doing this is because I want a capital letter and I wanna have numbers in their lower case and maybe we should put a symbol as well. And we wanna say that all of these are acceptable. So right now you can actually see if let's put a whole bunch of symbols at the end and you can see right now, this is not working. Password 123 would be accepted but having all of this at the end, this doesn't match the pattern that we have right here. So I'm actually gonna delete everything we have there and let's zoom in just to make this a bit bigger. And when we use redjacks, it is case sensitive. So we're gonna do square brackets first. We're gonna say we wanna allow it to accept A to Z. So you can see it's, this is working. It's saying all of these are valid. But I also want it to be able to accept capitals. So it's kind of weird, but we're gonna do AZ like that. No space or anything. Just how redjacks works. And now you can see password would be all things that are acceptable. But we also wanna say that it can select any numbers. So then we can just add zero to nine and now it's added those numbers in there and everything there is working. And it's just getting the individual characters which is perfect. The next thing I want it to do is to be able to get different symbols. And I guess we should put some different ones in here. And actually let's start with that. So I'm just gonna come here and I'm gonna copy this and let's go back to my email patterns here. And where I have the pattern, I'm gonna put that in. There's no forward slash anything else like that that you might often find with when you're using redjacks. And we'll come here. We don't need the email because it's not required anymore but we do need to put a password. Now this should work and it should allow anything basically we want but there's one more thing we need to do. But first here the type is I'm gonna change this text for now just so we can see the passwords that I'm entering. And so we should be able to put anything. I'm just gonna say hello. And if I hit submit, it should work but it's not working. And just with this form validation we need the plus right here just to say that it's any length would also work. So now if I write hello and I hit submit, it works. Cool, we're going to not found but I haven't set this up to actually do anything. But we can see that it's actually working and this is valid. But of course text, we want this to be at least eight characters. So how can we check for it to be at least eight characters is instead of putting the plus here I can put curly braces. And I'm gonna delete the plus and I'm gonna put an eight any comma. And now it's actually going to check it to see if it's eight. So if I write hello and I try and submit that please match the request in format. This tip is terrible, but we're gonna fix that. But let's do hello, hello and hit enter. It's over eight characters long. So now it's working perfect. Now we actually want to improve that tool tip. So how can we improve the tool tip is when we have this we can also add let's add it here. Actually we're gonna do a title and the title can be used as a tool tip. Now one thing for accessibility reasons you ideally want the requirements to actually be on screen. I'm sure you've filled out a password thing and actually put too many characters but you only find out after you try creating your account or just whatever. Sometimes it's not enough, whatever it is. It drives me nuts when it's like maximum of 21 characters or something but that's for another day. But here we can say must be at least eight characters. And now if I come in here and I read hello for my password, hello, must be at least eight characters. It says please match the requested format must be at least eight characters. So at least there's a little bit more information actually showing up in that tool tip when it comes up which is super, super useful instead of just getting frustrated with that default one that's there. So yeah, that's a decent start. Now there's definitely more to this patterns and stuff you can do to make sure that there's like a capital, a lower case and a number or symbol or whatever it is. And well, right now we don't even have symbols in here but let's go into the emails and sort of explore a little bit more of what we can do here. And of course, so let's come up here and put required. We saw that the problem with this hello at hello it accepts that, which is terrible. If I hit submit, it doesn't see an issue with this. It's skipping over it and that drives me nuts. So we wanna fix that a little bit on the default one that's right here. And once again, we are going to use a pattern for that. So pattern is equal to, so with our pattern here the question is how can we actually make this work? It's not that complicated. So if we come back to here where we had that we have to think of like what goes in an email address. So we're gonna say if it's inside the square brackets we're saying select anything in here is valid. So we can say eight is it is valid. People also like putting numbers in there. So just like before we can say zero through nine. Now this is lower case only. If you want to accept uppercase as well we can also say a to Zed like that. And you can also include any symbols in here that you want to include. So people often have periods in them. They might have an underscore in there. You have pluses because you can, even if you use like Gmail or something you can do plus and then add stuff and it will still go to your app like a regular email address. And I don't know if there's any other symbols you'd want in there, but those are ones that we can include. If there's other symbols that should be in there double check to make sure for valid emails. Of course, there's also hyphens. I think other special characters are allowed. So you can include the range of special characters you want to make sure right here, no problem. If you want more, because I think pretty much any special character is valid as long as it's before the app. But then we're gonna do is go outside of this and do plus the at symbol. And so this means we're gonna have a range of content. And actually let's take that off. And here let's just put in like an email address test. You can see it's working because this is matching what we want. But then the at symbols not, but here, you know, this is not including the at symbol. But here then we can say plus at and you can see that whole thing is now valid. It's matching what my search is here. If I take that off, we're not matching anything because we have a range of characters that are matching but we don't have the at symbol in there. So we need to have the at symbol. And because of how this is set up if the at symbols first, it doesn't work. We need to have the characters then we're gonna have an at symbol except there we go at symbol. And then we want to do pretty much the same thing though I don't think all those special characters are allowed. So we can do another range of content. And we also want to include the hyphen. Now I'm not doing the hyphen here because I don't want it. Oh, it's letting me do it. Just in case you can put a space just to make it more obvious. So you can see this is now failing. But if I came and I put more characters here it is going to work, but we're stopping at one. But I think when we're done it should match up no matter what. So we'll see what happens. But we want to say accept a new range of characters. And the next thing we're gonna do is do we want to ensure that we have the dot. Now the problem with putting the dot out here is it's looking that matches any character except line breaks. I don't want to match any character except line breaks. It's not a wild card that we want. So I'm gonna come up and put a back splash back slash here because this means that we're escaping this and we're actually mean like the symbol, like the dot. We want a period that we want that character and not the rejects version of what that actually means for like looking through a range of stuff. So now we need to have the dot here. And now, as you can see, this is working. So whatever we have here we can have numbers hyphens and it's all working. And a lot of the ones that you'll find at the end here we'll have the full range here as well. So we can do this again and just say like A to Z. So here then we need something but you'll often here see that it's going to come in and it's gonna go for a two to four which means it has to be two to four characters long as after my dot, generally, we have a dot com. It fits, we have a dot co that fits, dot net that fits, dot gov, whatever it is. And in the old days, two to four is very similar here or very common, I should say and that was about all that we had but now we also have things like dot design. And that means this isn't actually valid and it's not matching. It's matching everything up to the fourth character. So we could actually say two comma and then anything that comes after would be fine. If you wanted to put an upper limit on it, you could but I think, you know, generally speaking it's a little bit, I'm gonna leave it like this. I think this is fine and I'm just gonna select all of this. Copy that, this may not be perfect. I'm just, we're looking at how this works, how we can build this with Regex. If you might wanna make this a little bit more robust for your own to make sure that all the special symbols that you wanna accept it are acceptable and do you wanna allow capitalization and other things like that? So just to say, not necessary to copy and paste this one but just to give us a base of how this can actually work and now let's come here and we're gonna do test at test which on the old version would work but now if I do it, it doesn't. Please enter a valid email address and then if I actually come in with a.com and I hit submit, this is actually showing up as valid now which is wonderful and it takes a little bit of time to set that up but you can just have this ready and use it every single time and then you have in browser form validation you'd be using Regex with JavaScript to be doing a lot of this anyway and as we saw, we can use the title for the tool tip or to help give more information within the tool tip we could bring in another one here they could check for it too. Now these tool tips aren't smart so they don't know what the issue is they just know it's not matching the pattern but I think it's good enough just to sort of remind people of what the problem might be and if you think this is kind of cool and you'd like to do more stuff without having to rely on JavaScript for it there's actually a way to have a search field with auto suggestions where you're not actually using any JavaScript in that either if you wanna know how that's done there is a video right here for your viewing pleasure and with that I wanna give a very big thank you to Jan Johnny Lucas, Mr. Dave, Patrick, Simon, Steven and Tim for being my enablers of awesome on Patreon as well as all my other patrons for your monthly support and of course until next time don't forget to make your call on the internet just a little bit more awesome.