Easy Form Validation (no JavaScript)
Вставка
- Опубліковано 3 жов 2024
- For basic front-end form validation, reach for html! (Of course, you'll want to validate on the server, too, but it couldn't be easier to provide a good experience on the front-end.
CodePen link: codepen.io/Cod...
---------------------------------------
🌐 Connect With Me 🌐
Website: codinginpublic...
Blog: chrispenningto...
Twitter: / cpenned
Patreon: / coding_in_public
Buy Me a Coffee: www.buymeacoff... - Навчання та стиль
Nice! I didn’t know about the title thing-your videos are always full of cool tricks 😊
Same. Title was new to me. Too bad you didn't go into the css pseudo-classes to style (in)valid fields.
Yeah, pseudo classes are awesome. It’s hard in that it’ll start validating on input which isn’t my favorite experience. I prefer to add that styling on blur() with js for that reason.
Glad you enjoyed it! Now gotta muse about other tricks to keep up the trend! lol
I always do this to clients, but my manager always tell me to have a custom validator - but it can consume time (which i dont like). And the funny thing for me is that i didnt received any negative feedback to the default validator from the end users.
Most beginner devs dont know this. Kudos to you, Chris. 🔥
Yeah, it’s hard. I typically add much more robust validation for full builds. But for simple sites for friends, I love these little helpers.
Much better way: show a checklist of rules, that change color/icon depending if you input met the criteria or not while typing
Yep, like I said, this is more for quick forms but for prod sites, you'd want a more advanced solutions.
Great video! Didn't know about the title! I wonder if that's in all browsers...
Also, just a tip on regex, you can use \D to represent anything that isn't a number digit, and \d for any digit instead of [0-9].
It's good that you mentioned that you need to be careful with the validation because there's so many edge cases and you don't want users to not be able to complete the form.
Good call on the regex! Thanks!
This is a nice quicktip, though having the REGEX pattern right is always a pain, since there are so many local differences!
Also, since you ALWAYS have to check/sanitize the data in the backend (since people can just edit HTML and remove frontend-pattern matching), it usually makes sense to build the form in the backend to have the same regex pattern matching in the frontend AND backend to reduce duplicates and therefore differences in the future.
agreed. For a full validation, I’d want the same checks and sanitation on front and backend. I used this pattern matching on a little custom website for a few friends to input data for a Christmas gift exchange. But it’s a cool little tool for something small like that.
Thank for sharing! so cool ❤
Thanks for watching!
nice tutorial. thx!
You're welcome!
Thank you this very helpful
Thanks for saying something!
Hi your videos are always great can you make more videos on form handling And validation in react , next js without library and by the way did you watch gta6 trailer
I may! No promises, but thanks for the idea!
Amazing!!!!
Super helpful as always. 😃
Glad it was a help, my friend.
Can we get this working while we are writing and not after submitting the form??
Not with this validation. There are lots of thoughts on when and how to show error states in form, but you’d have to use JS to show on input.
You could add an event listener to an input and report validity:
// Assuming you have input set from a querySelector or in a loop via querySelectorAll.forEach
input.addEventListener("input", (event) => {
if (event.target.value) {
event.target.reportValidity();
}
});