👀 Views: 24 💬 Answers: 1 📅 Created: 2025-06-08

html form-validation microsoft-edge javascript HTML

I'm refactoring my project and Does anyone know how to This might be a silly question, but I'm trying to implement HTML5 form validation on an input field, specifically the email type... I want to provide custom behavior messages when the validation fails. However, I noticed that in Microsoft Edge, the custom messages aren't displaying as expected. Instead, I'm getting the default browser messages. Here's the relevant part of my HTML: ```html <form id="myForm"> <input type="email" id="email" required placeholder="Enter your email"> <span class="behavior-message" style="color:red; display:none;">Please enter a valid email address.</span> <button type="submit">Submit</button> </form> ``` And the JavaScript code I wrote for validation is: ```javascript const form = document.getElementById('myForm'); const emailInput = document.getElementById('email'); const errorMessage = document.querySelector('.behavior-message'); form.addEventListener('submit', function(event) { if (!emailInput.checkValidity()) { event.preventDefault(); errorMessage.style.display = 'block'; } else { errorMessage.style.display = 'none'; } }); ``` I’ve tested this in Chrome and Firefox, and the custom behavior message appears correctly when the email is invalid. However, in Edge, it shows the default tooltip instead of triggering my custom message. I've checked the version of Edge, and it's the latest (version 117.0.2045.47). Is there a known scenario with Edge regarding this, or is there something I'm missing in my implementation? How can I ensure that my custom behavior messages show up consistently across all browsers? For context: I'm using Html on Ubuntu. How would you solve this? Thanks, I really appreciate it! This is part of a larger microservice I'm building.