How to set custom error messages for your HTML forms

Video Description

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-form--G-hYlqKJj?via=kevinpowell ✅ Starting & finished code: https://github.com/kevin-powell/fem-contact-form-validation ✅ 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/Guides/Constraint_validation ✉ 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.com/) 🚀 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!