Frontend

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)

Code is my canvas  | AI art IS art | the future of art is not set in stone | Uriel Avalos | linktr.ee/robotandkid

oh nuice! 

yea i've been doing a stackblitz project and it's been fun. Certainly still many gotchas.

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

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

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;
}
```

All of the above is supported out of the box with modern form validation HTML. No JavaScript required.

Mark the required fields as `required`, add a `min` length to the name. Add the appropriate patterns to email and phone inputs. The form submit button will not enable unless all the validation rules pass. 

Use CSS to style as needed.