How to override email input validator message?
How to override email input validator message?
I have an email input like this, basically there will be 3 original validators.
Please fill in this field
a
Please include an @ in the email address...
a@
Please enter a part following @...
Now I need to override the existing popup with my own alert, lets say "alert1", "alert2" , "alert3". But I'm having difficulty writing code to differentiate between these three. Any help please.
"alert1", "alert2" , "alert3"
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>validity.typeMismatch</title>
</head>
<body>
<form name="frmRegister" id="frmRegister">
<label>Email Address:<br><input name="txtemail" id="txtemail" required="required" type="email"></label>
<input type="submit" value="Register..">
</form>
</body>
</html>
required
type
type="text"
Thanks for the advice, yes i think i should go with your recommendation
– Ngoc Tuan Lam
Jul 3 at 9:33
1 Answer
1
$('input[type=submit]').click(function() {
const dom = document.getElementById('txtemail')
if (!$('#txtemail').val()) {
dom.setCustomValidity('alert1')
} else if ($('#txtemail').val().indexOf('@') === -1) {
dom.setCustomValidity('alert2')
} else if ($('#txtemail').val().indexOf('@') === $('#txtemail').val().length - 1) {
dom.setCustomValidity('alert3')
}
})
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Leave the browser's own popups for field validation since it does everything it already needs. You're not only trying to reinvent the wheel, but you're also trying to make the user's browser do something unexpected. This is a bad idea. If you do insist on doing it then remove the
requiredattribute, changetypetotype="text"and write your own validation handler.– Archer
Jul 3 at 8:50