HTML form validation implementing `<input type='email'>` in Chrome 118
I'm collaborating on a project where I'm following best practices but I'm getting frustrated with I'm experiencing issues with form validation when using `<input type='email'>`..... Despite the input being marked as required, Chrome 118 seems to bypass the validation when I programmatically set the value of the input field using JavaScript. Here’s the HTML snippet I’m working with: ```html <form id='myForm'> <input type='email' id='email' required> <button type='submit'>Submit</button> </form> ``` And the JavaScript code that sets the email value is: ```javascript document.getElementById('email').value = 'test@example.com'; ``` When I call `myForm.submit()`, I expect the form to validate the email input but it submits without any errors, even though the input is empty when the page loads initially. I’ve tried to add a manual validation check using: ```javascript if (!document.getElementById('email').checkValidity()) { console.log('Email input is invalid'); } else { myForm.submit(); } ``` However, this does not catch the validation on the email field after setting the value programmatically. Is there a way to trigger the validation check correctly after dynamically setting the value? I also confirmed that my HTML and JavaScript are correctly linked, and I am testing in incognito mode to ensure no extensions are interfering. Any insights on this behavior would be greatly appreciated! I'd really appreciate any guidance on this. What's the correct way to implement this? Am I approaching this the right way? My team is using Html for this microservice.