Вот пример того, как это сделать:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Вам придется изменить текст внутри alert, чтобы включить ваше собственное сообщение, и action_page.php, чтобы включить ваше собственное и добавить желаемый.Стили повсюду!
ОБНОВЛЕНИЕ
Если вы не хотите реализовывать свои собственные функции JavaScript, тогда вы можете просто продолжить и добавить условия в oninvalid какследует:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">