Content
@
0 reply
0 recast
0 reaction
Robotandkid
@robotandkid
vanilla JS challenge: if you ever asked yourself why peeps use state management libraries or why front-end frameworks like React exist, try to code this simple app using only vanilla JS: User requirements =============== - User must enter an email, name. Phone number is optional. - Email must be a valid email. - Name must have at least two letters. - Phone must be a valid US number. - Disable the submit button whenever the form is invalid (and enable it whenever the form is valid). - Show an error state on the first invalid user input (and hide it whenever the form is valid)
1 reply
1 recast
7 reactions
Darryl Yeo đ ïž
@darrylyeo
Seems doable actually â vanilla HTML form attributes have gotten quite good! I like to keep the submit button enabled to let the user manually trigger validation, but visually âdisablingâ it trivial now that we have `:has()` in CSS: ```css form:has(:invalid) button[type="submit"] { opacity: 0.5; } ```
1 reply
0 recast
0 reaction
Robotandkid
@robotandkid
oh nuice! yea i've been doing a stackblitz project and it's been fun. Certainly still many gotchas. https://stackblitz.com/edit/vitejs-vite-qsbpcy?file=main.js
1 reply
0 recast
1 reaction
Darryl Yeo đ ïž
@darrylyeo
Nice! If youâre interested in learning true web-standard way to do this, I highly recommend reading the MDN articles on `FormData` and constraint validation: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
1 reply
0 recast
0 reaction
Robotandkid
@robotandkid
i'm looking at this from a UX perspective. It's very easy to get *wrong*. Ex: the project I linked to lacks onBlur validation so it's possible to "submit" the form w/ invalid errors.
1 reply
0 recast
1 reaction
Darryl Yeo đ ïž
@darrylyeo
Yeah, normally youâd handle final validation in the `submit` event handler, and as a final resort call `event.preventDefault()` to prevent the server request. When you decide to handle form state yourself, you also end up having to manually replicate all the behavior people expect from form control elements by default â CSS pseudo-classes and all. Not easy.
1 reply
0 recast
0 reaction
