How to show a custom validation message with pattern validation for email

Question

I want my HTML form to show a custom error message when an email address is not in correct format

<form>
    <input type="text" pattern="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" name="email" oninvalid="this.setCustomValidity('custom message')" oninput="setCustomValidity('')" />
    <input type="submit" value="Send"/>
</form>

JSFiddle example

When I enter an email in the wrong format and click "send", the expected message is shown:

However when I start typing again, the following default browser message is shown (my browser is set to Dutch):

Is there anyway to prevent the default message from showing? Can I disable the validation while typing?

Answer 1

You can do this..Assuming your textbox id is "text1"..

$("#text1").change(function(e) {
         e.preventDefault();
    });

or

 $("#text1").keydown(function(e) {
         e.preventDefault();
    });

Any of above can be used but in your situation I prefer keydown event...