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:

The expected message

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

Default message

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

waheed Asghar · Accepted Answer · 2015-06-19 05:54:21Z

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...

answered Jun 19, 2015 at 5:54

waheed Asghar

951 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related