HTML Input with Custom Validation Not Triggering on Form Submission - Need Insights
I have an HTML form that includes a custom validation for an input field. The scenario is that although I defined a `pattern` attribute in my `<input>` element, the validation seems to be bypassed on form submission. I’m using HTML5 and my form is structured like this: ```html <form id="myForm"> <label for="email">Email:</label> <input type="email" id="email" name="email" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required> <input type="submit" value="Submit"> </form> ``` When I try to submit the form with an invalid email format like 'invalid-email', the form submits anyway without showing any validation errors. I expected the default browser validation to prevent submission. I have tried adding `novalidate` to the form and also removing it, but the behavior remains the same. I am using Chrome Version 94.0.4606.61 on Windows 10. Furthermore, I’ve checked for JavaScript errors in the console, but there are none. If I attach a custom validation using JavaScript, it works fine, but I want to leverage HTML5 validation for simplicity. Could there be any CSS or external JS interfering with the form functionality? Any insights would be greatly appreciated.