Going to start my journey and mark 100 days calendar.π¨βπ»π
Day: 1/100 π
Project - 1 π¨
# HTML Formπ
> Client side form validation with HTML π
`Check required, length, email and password match π§`
- Create form UI π¨βπ»
- Show error messages under specific inputs β οΈ
- check Required() to accept array of inputs π£
- check Length() to check min and max length γ½οΈ
- check Email() to validate email with regex βοΈ
- check Passwords Match() to match the confirm password π
Publish β‘οΈ Netlify
Source Code </>π GitHub
Top comments (3)
Dunno who's teaching you HTML, but they're over a decade out of date.
Where's your FIELDSET?
The small tags static in the markup being scripting only is a waste of bandwidth, and likely what you would show inside them isn't de-emphasized text. (aka what smaller text would mean structurally/grammatically). You likely should be using HTML 5 validaition and setCustomValidity in your scripting. 90% of what you're doing isn't even JavaScript's job anymore.
The endless pointless DIV for nothing with classes for nothing are doing you no favors,
You could probably ditch the for/id for BR given the relative simplicity of your style. Just use the labels as wrappers instead of those "DIV for nothing".
"required", "minlength", and "maxlength" can be done in HTML now without a line of JS even getting involved.
Just as setting type="email" provides e-mail validation without any scripted rubbish.
In fact, the only thing that requires JavaScript is the password matching.
Likewise placeholder isn't a label, and doesn't exist to say "enter username", it exists to provide an example of what the user should type in.
All of which being why you've got 1k of form markup doing half that's job, and 2.25k of JS when you need less than 1k of it.
Read up about it here:
developer.mozilla.org/en-US/docs/L...
--edit-- here's a pen to show what I mean. I didn't style it, but the functionality is present.
codepen.io/jason-knight/pen/RwLQwWB
Thank you so much for you suggestions. I will be focusing what you have mentioned the points and i will improve my skills as well. Thank you so much for precious time. And Now i will improve those points which you have mentioned.
Not to criticize, but your code seems slapped together just to get it out for your little "challenge". If you are going to make community posts, try to make them somewhat good. As @deathshadow60 said, your HTML is way out of date. You are using way too much Javascript!