How to set custom error messages for your HTML forms

The browser comes with native, client-side form validation that works quite well, but the errors have a few issues, from problems with internationalization, and no way to custom style them. Luckily, we can use the same API the browser uses under the hood to customize our errors quite easily!

🔗 Links
✅ Frontend Mentor Project: https://www.frontendmentor.io/challenges/contact-for...
✅ Starting & finished code: https://github.com/kevin-powell/fem-contact-form-val...
✅ First video where I look at the styling: https://youtu.be/jJgNgNNHqjk
✅ MDN article on the Constraint Validation API: https://developer.mozilla.org/en-US/docs/Web/HTML/Gu...

✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.c...
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

⌚ Timestamps
00:00 - Introduction
03:00 - Using novalidate and manually checking validation
09:30 - Checking all the form fields
15:00 - Adding error messages
17:30 - Removing the error elements when they are empty
18:52 - Styling for the error states
20:20 - aria-live=”polite”
22:00 - Custom text for each error message
25:25 - Adding the errors for the radio buttons
29:00 - Adding error messages when the user moves out of a form field
32:45 - Removing error messages when a user fixes the problem
34:00 - Adding focus to the first invalid element on submit
36:40 - Fixing the layout when error messages appear

#css

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join

---

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!