Hello today i will share with you the form validation i created using HTML,Javascript and TailwindCSS.I will give a brief description about it and ...
For further actions, you may consider blocking this person and/or reporting abuse
This could be achieved in a much simpler way using the built in HTML form validation and CSS pseudo classes
It’s way understandable that a beginner wouldn’t use the built-in constraint api or would play without using it.
What isn’t understandable to me is how many popular libraries don’t use the built-in browser functionality. It gives the false impression that it’s not there or that it isn’t amazingly good.
I’ve been disagreed with many times for advocating React code that uses standard browser APIs. I haven’t had much trouble doing so though. You just have to trigger React to render at the exact appropriate times in the exact appropriate places. Not nothing, but better than the alternatives.
I’ve also had a tester aggressively prevent me from having default validation messages in the default language of the browser, even when all the higher ups said it was fine.
Thank you for sharing this 🤠
I implemented my own library for handling form validation before frameworks like React started getting popular and before built-in validation was any good. So it's not quite compatible with React or the other newer frameworks (that I know of, I haven't tried it). One of the reasons I haven't touched it in years is because there are so many other libraries out there that fill that niche, and also because the built-in validation is more robust. That said, at my job we have a particular UI style which really can't use the built in validation. The main reason is consistency across OSes - if browsers somehow find a way to make that aspect possible/easier to do, I could see that changing. If you're interested, my library is ozzyogkush.github.io/formation/
@ozzyogkush, I’d be interested in learning how the constraint validation api doesn’t work across browsers or under any OS, if it doesn’t.
I do turn off the modals, I think by setting the form attribute novalidate to true. But the underlying validation messages are still there and displayable, and customizable too.
@ozzyogkush, in addition to the validationMessage property on each input, there’s also the validity property with state, and setCustomValidity is callable before each submit.
To be fair I haven't read up on native validation in a while, so I'm making assumptions. OS-specific UI issues I was talking about include styling elements, alert boxes, and other widgets rendered by the OS. I'm not actually sure how that applies to form element validation.
What we use at my work (on at least one of our products) is a separate home-built system with React and a HOC that handles validation state and messaging, but it's possible we could slim it down and rely on built in functionality - assuming it's possible to make it look and behave the same across the browsers we support, and how well we can accommodate our UI/UX designers. That said, we're actually using MUI in newer products, and possibly Web Components in the future. So there'll probably be an opportunity to look into it for that, but it won't be my job to implement it for once.
Yeah Creating it this way can help in learning some javascript concepts
Basically for learning purpose
Even without the built in stuff, there are way better ways than this - with half as much code
Yeah but creating like as a beginner can also help in thinking about doing things in different, I am talking about Going from A to B to C and you are talking about directly going to C and when you started learning web development, you created everything professionally in your early days of learning or started from basics and then with time improved the way of writing code ?
Well, way back when I first started using JS with forms I used the DOM stuff that allows you to work with form data directly - instead of writing code that ignores the fact that you're using a form
This is a good way to understand javascript cocnepts very well
Thanks for sharing this
Thank you