Can someone assist me with validating email addresses correctly? I am able to handle empty fields, but now I need a way to identify and display an error message for invalid email addresses. How can I modify my validation process to check for improper email formats?
This:
if (x == "what goes here?")
{
document.getElementById("demo").innerHTML = "Please enter a proper email address";
document.getElementById("demo").style.display = "block";
return false;
}The placeholder "what goes here?" needs to be replaced with the correct value.
Without further ado, here is the code snippet for the website:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'PT Sans', sans-serif;
}
p#demo {
padding: 5px;
background: rgba(255,0,0,0.2);
border: red solid 1px;
color: red;
display: none;
max-width: 140px;
text-align: left;
font-size: 12px;
margin-left: 2px;
font-family: 'PT Sans', sans-serif;
}
input[type="submit"] {
background-color: red;
border: none;
font-family: 'PT Sans', sans-serif;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
}
input[type="email"] {
padding: 4px;
}
input[type="email"]:focus {
outline: none;
}
</style>
<script>
function validateForm() {
var x = document.forms["myForm"]["EMAIL"].value;
if (x == "") {
document.getElementById("demo").innerHTML = "Email address is required.";
document.getElementById("demo").style.display = "block";
return false;
}
if (x == "what goes here?")
{
document.getElementById("demo").innerHTML = "Please enter a proper email address";
document.getElementById("demo").style.display = "block";
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="https://gmail.us19.list-manage.com/subscribe/post?u=f206f10b38a504434c650c6bf&id=5ce815006b" onsubmit="return validateForm()" method="post" >
<p id="demo"></p>
<input type="email" name="EMAIL">
<input type="submit" value="Sign up!">
</form>
</body>
</html>