Improve your form validation hints without JS! 

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.

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.

Don't add your own regex to check if the email is valid please! If you set the type of your input to email as in: , the browser will check if the email address is valid. The one you entered, abc@abc, could potentially be a valid email. The best way to check if an email is valid is to simply send it an email and let the user verify it.

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.

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

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

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!

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✌

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

Thank you for this great video, bro you are awesome keep doing this wonderful content and blessings

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 😊

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.

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)"

Großartig, vielen Dank!

Your voice and presentation is soo soothing

man this is sooo good 🔥🔥🔥

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,}".

Thank you for form content sir

thank you so much dude you're a god

Super helpful! Thanks

What would be a recommendation to show * as required for labels?

BROOO THANK YOU!!!!!!!!!!!!!!!!! YOU'R THE BEST!!!!!! I LEARNED EVERYTNice tutorialNG I NEEDED TO KNOW THAN YOU VERY

This pattern property is verry nice !! Tkx!!

Thanks kevin !

Hey, can you make a video about figure and figcaption tags? I saw them on Tailwind CSS site and I think they are great for making semantic cards. Do you think they're worth to use?

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

Finally somebody that explain regex easily

Amazing!!!!

Cool - I was wondering about whree the validation came from in the short earlier this week.

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 :)

How would we go on styling those pre-styled browser vendor tooltip ?

I just watched formik + yup for form validation and management.....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.

I have a stupid question, will this work on PHP? I'm kinda learning how to make a login system for my website.

Hi, Kevin! Can you also take a look at `:invalid` CSS selector in upcoming videos? Thanks

i tried to used preventdefault function and it overided the html validation how can i go arround this the method is post

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 :)

“Hello@hello” is a valid email according to the RFC. I believe it’s because emails could be used internally where an email server might route that happily.

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”

It would be great if you made a video on making a clean 404 page?

Do you need to use regexr to add the pattern? Can't you just type the pattern in your HTML page?

thanks

How to do that split screen where you can see what you're coding in real time?

Kevin, is there a chance to customize the default error tooltip by css?

After @ there shouldb be also dot allowed for subdomains. A-z and others can be replaced with w for words.

thanks for the tips.... we can skip the JS validation now... i have read somewhere that some people can override this client side validations? ... so they suggested to use server side validation too.... is that correct? .... i am exited to see if can customise more this validation like if i want to change the color of input when it not valid...

hello . i have been wanting to improve my CSS by taking your classes . but I don't know where to start from . i would like to take your CSS class from the beginners to the advanced .do you have any links that could let me to subscribe to your classes and take the classes . i have learnt CSS before but would like to listen to your full classes And see what I can get from there . please leave a link to those classes and I will go subscribe . Thank you

Hi! I love your videos Thank you for sharing your knowledge. Can you make a video of how to include a captcha on a contact form please.

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!

Cool thing is you can still use regex pattern on inputs that don't natively support it, like textarea, with just a little javascript.

Can we style that tooltip?

I'm not a fan of plugins but I recently built a website for a client and installed contact form 7. Their validation protocol is impressive but of course it only works with WordPress!😉

If I didn't know regular expressions before, I would definitely be scared by your explanation 🙂 But the video is great, thanks.

This email regex is only valid for latin alphabet emails. I wonder if other alphabets are accepted for email adresses user names.

I don't think spaces are allowed in domain names, so I'm not sure why a space was added to regex. Good ideas on form.

Where I'm coming from - i18n is a must. I don't see any options to resolve this do this html way :) Allright - I've got your point. "Do it on BE side"

Why not to use "type='email'" instead of regexp?

ikr!

till is not working in safari as it is in chrome

Men, why is there no standard function for email validation?

❤️‍🔥

Maybe from now I will be able to type regex for email validation by myself...

If you allow a space in the domaine name of the email, it will accept a domain with a space, wich is not allowed

i just tried the same in GPT chat, and its working, so no need the regexr tool LOL

9:00 nooooo, now you'll except URLs with spaces in them. Which is not a valid URL

The best validation for an email in a form is to send an email and have them validate it. Avoid making valid emails not accepted by overly checking validity.

Hi Kevin, keep in mind that validating froms by doing it only in HTML is tricky, because someone who has program experience can just go inspect the browser and remove the required from the html code and then they can login without filling in anything

🥰

... Tips for validation protection from spammers would be great.

Every programmer that puts a maximum length on a password should be fired immediately

You might omit the uppercase characters in the charset and add the "i" modifier (case insensitive) as the RFC has the email address and a hostname being case insensitive.

Interesting... But what would happen if a user hits f12 and remove pattern attr in html and then fill out the inputs and hit the enter key? It can be hack like this? Cuz users can modify html from browser but they cant modify javascript! Let me know what would happen in this case 😁

I came here hoping to learn how to style the error tooltip. Disappointed PS: I love your channel for HTML nad CSS

Re email regex: "it's not that complicated" oh boy, do you have a lot to learn...

In the 2nd lockdown

This should be done server side also, doing it in HTML alone is pointless

Regexp is black magic

i stopped wasting time on regex since most patterns are readily available in stackoverflow

This is cool but very very very not safe to use in a website

Man, how old are you

Validating email just doesn't feel worth it at all with all the weird stuff you can have in addresses like Chinese characters and quote marks

This should not be done for security reasons.

.

Big letters should be banned in email to teach people how to write it right.

Your email regular expression is also bad, not just your password one (as mentioned in my other comment). Seriously, I do like your channel (even though I already know most stuff), but you shouldn't give tips about things that you don't know much about. Your email regular expression doesn't match subdomains as well as top-level domain extensions consisting of multiple parts. For example, in the UK a two-part domain extension is common. Your regular expression only matches domains containing a single period. Another example: Students from the university of Salzburg get email addresses a four-part domain with three periods. You should definitely allow domains with any number of periods in them. Also, you don't include domain extensions containing hyphens in it, which are necessary for Punycode domain extensions that are used in some languages containing non-Latin-alphabet characters. And if you really want to be precise, you actually should allow domains that don't contain a single period at all (which is the default in browsers), because many companies have a domain set up in their local network that doesn't have a domain extension at all. Google for example uses the "go" domain in their company's network. No domain extension at all here. Some of these companies also use email addresses for internal-use only that use these domains, and an employee should be able to put their company internal email address in there, even though the email is not reachable from outside the company's network. But if you, for example, make a service that companies can self-host in their internal network, putting email addresses with domains not ending in a domain extension actually makes sense.

SECOND!

It's really great to learn from you! BUT Do you really use all of these stuff you teach in your projects? Since most of them are not supported for modern browsers OR supported only in the latest ones. And form validation via HTML is really weak spot! Someone understanding the markup can easly change it and send a broken data to database!

What about domains that have 2 extensions i.e - .co.kr

If you add the attributes *oninput="this.setCustomValidity('')"* and *oninvalid="this.setCustomValidity('A custom message goes here')* , you can get rid of the default messaging.

You can also set a custom validation message with setCustomValidity - developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

What are the requirements to become an expert in creating PayPal Money Adder programs

This is a good video, but don't use Regex for Email

Probably best to search online for a more complete and proper regex pattern for these things. If you're just a front end developer, you're probably not aware of all the edge cases or how to handle them, so it's better to go with something tried and tested vs. trying to come up with it on your own. For example, the space before the dash in Kevin's pattern means that it would allow a space in the email address itself, which wouldn't work in the real world. And as for domains, this might catch something like ".design" but it would fail to capture something super-common like ".co.uk".

I beg you not to do this! Please let me log into your site as "...."@[2603:c020:800b:fe:23ce:871b:9a09:4eb0] like god intended!

For anyone else struggling with regex, I recommend Engineering Man's "Regex - enough to be dangerous"

I know a lot of people have mentioned the issue with email validation, but I also wanted to raise one that doesn't seem to have been brought up, ".co.uk". here in the UK we're a country of about 70 million people, and this regex would invalidate all of those because it only accepts 1 dot atm. That's a lot of possible false flags on it's own and I think is sizeable enough to hardly be called an edgecase.