Improve your form validation hints without JS!

Native form validation leaves a little bit to be desired, but we don’t need any JS to make big improvements to it on the client-side of things. You'd still want some proper validation going on behind the scenes of course though!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:30 - the problem with the native validation
00:57 - simple password validation
06:28 - email validation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

You'll still want to use some proper validation on your forms, but for these client-side hints we can make big improvements with a little extra HTML.

[zibadian]

The validation of the e-mail is not according to the official e-mail format standard. It does capture most used emails, but a lot might still be considered invalid. A full regex e-mail validation is next to unreadable, because of the allowed variation in the way e-mail addresses can be written and the specific constraints on the various parts of the e-mail address.

[BenjaminAster]

Using this RegEx as a password pattern is a horribly bad idea because: 1.: People with languages that don't use the Latin alphabet (e.g. Russian), or don't use it exclusively (e.g. German) can't put characters from their language as a password, and 2.: Users should be allowed to put special characters like !@#$%^*&... into their password to make it harder to brute force. The perfect RegEx would simply be ".{8, }".

[Stoney_Eagle]

Regex can be tricky but it's sooo powerful, it's a skill you need to have as a backend developer for sure 😉

[peterholzer]

Please please please don't try to validate email addresses with regular expressions. You will never think of all the corner cases and you will end up getting both a lot of invalid mail addresses and antagonizing those of your users who have slightly unusual mail addresses.You can check the domain name fairly easily in the backend. But if you really want to check an email address you have to send a mail.
Also, checking passwords beyond a minimum length is probably not a good idea. "Password1" satisfies the usual rules (at least 8 characters, characters from 3 different classes) but is of course terrible. "ftzrivpznmgmqpqdmldr" doesn't but is much stronger. And aren't 6 Chinese characters probably stronger than 8 Latin characters? It might be useful to check passwords against haveibeen0wned, but you almost certainly should do that in the backend.

That said, client-side validation is absolutely useful for data where you control the format or the format is well-known and simple.

Also thanks for the tip about using title. I didn't know that.

[AlexKozack]

If you use `minleng="8"` attribute instead of `{8, }` in pattern browser tips will be somthing like: "Please enter at least 8 characters. (You have now entered 5 characters)"

[shahfaisal]

This was really awesome by the way. Thanks for uploading such amazing work.
I also would like to thank to all your patrion members.
Lots of love and respect from Afghanistan.

[ransomecode]

The browser's constraint validation api is the right tool to use in any sort of client side form validation. That should be preferred over any sort of hack. Or JOI is a really cool library which makes it a tonne more enjoyable 😊

[gmangsxr]

For email validation I might point out that less is better. When you get overly specific you’ll eventually run into a mismatch issue on a valid address. Best to make your validation be simple like (something before the @)+@+(something after the @).(something after the dot)

People that want to put fake emails will, but you don’t want to accidentally throw errors for edge cases that are valid.

Best to make validation as minimal as possible and if a real address is critical… use a secondary confirmation method like “an email has been sent, click the link to confirm”

[GonzaloMassa]

Kevin, if you add the "i" flag after the regex (/[a-z]/gi) it will be case-insensitive. Also you can use \d for digits :)

[stevejohnson]

Good video Kevin, I was just looking for something basic and you delivered. Good intro video to regx.

[CodingBill]

This is gonna be my standart. Thanks a lot for this video, i wanted a way to learn regex but i search about form validation. 2 in 1 ! You're a boss ! :D

[jennifermagpantay]

Great content as always!! I was literally working on regex yesterday at work and I was figuring out how to set a proper one for address. This video gave me great tips of how do it!

[savvyprogrammer]

I just made it this type of video😆 what a coincidence!
Anyway these attributes are so powerful 💯 even some senior developer doesn't know about that 😋😆
Love your content as always✌

[YamiTatsu]

Nice video !
You might not want to allow a space for after the @ sign in your class, and also mention that if you want a hyphen in the class, it should be escaped or put at the end :)

[sajarinm]

Is there a way to change the style of error tooltips with css?

[tejasshekar]

I just watched formik + yup for form validation and now watching this.

My thoughts: This is all good for vanilla stack, but for frameworks and libs like react, it better to use packages as error handling is a bit hard to manage.

[Tesseract]

Your voice and presentation is soo soothing

[Ben-zmcb]

Finally somebody that explain regex easily

[IainSimmons]

I'm a weird one in that I actually like regex, but the main thing I learnt from this that I didn't know is using the title to add to the default validation tooltip!