javascriptjqueryangularjshtml

custom/override error message provided by browser?


Is there a way to override the error message provided by browser? I have a simple html:

<input type="email" name="recipient">

If the email format is incorrect, the browser will show a message like :

in Firefox:

Please enter a email address.

in Chrome:

Please include an @ in the email address... 

I wanna customize this browser provided error message, hope someone can help me on this. Thanks in advance!


Solution

  • You can set a custom validity message like this

    $('[name="recipient"]').on('invalid', function(e) {
        e.target.setCustomValidity("This is a custom error message");
    });
    

    FIDDLE