How to set custom error messages for your HTML forms

The browser comes pinch native, client-side shape validation that useful rather well, but the errors person a fewer issues, from problems pinch internationalization, and nary measurement to civilization style them. Luckily, we tin usage the aforesaid API the browser uses nether the hood to customize our errors rather easily! 🔗 Links ✅ Frontend Mentor Project: https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj?via=kevinpowell ✅ Starting & vanished code: https://github.com/kevin-powell/fem-contact-form-validation ✅ First video wherever I look astatine the styling: https://youtu.be/jJgNgNNHqjk ✅ MDN article connected the Constraint Validation API: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation ✉ Keep up to day pinch everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come bent retired pinch different devs successful my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start penning CSS pinch assurance pinch CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check retired my precocious course, Beyond CSS: https://www.beyondcss.dev/ ⌚ Timestamps 00:00 - Introduction 03:00 - Using novalidate and manually checking validation 09:30 - Checking each the shape fields 15:00 - Adding correction messages 17:30 - Removing the correction elements erstwhile they are empty 18:52 - Styling for the correction states 20:20 - aria-live=”polite” 22:00 - Custom matter for each correction message 25:25 - Adding the errors for the power buttons 29:00 - Adding correction messages erstwhile the personification moves retired of a shape field 32:45 - Removing correction messages erstwhile a personification fixes the problem 34:00 - Adding attraction to the first invalid constituent connected submit 36:40 - Fixing the layout erstwhile correction 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 maine connected Patreon: https://www.patreon.com/kevinpowell aliases done 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 connected immoderate different places connected the net too! If you'd for illustration a down the scenes and previews of what's coming up connected my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And immoderate you do, don't hide to support connected making your area of the net conscionable a small spot much awesome!