In this post we will use Javascript to prevent formsubmission if someone wants to use an email address that belongs to a specific email domain, such as @aol.com or @yahoo.com. If someone tries to submit the form using one of the blacklisted email domains, an alert message will be shown.
First of all we need to create a simple form, here is the HTML (note the “subscription_form” id within the form tag and the “email” id in the input field)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<title>Prevent form submission with specific email domains</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Prevent form submission with specific email domains</h1>
<p>Try to use one of the following email domains to submit the form: aol.com, yahoo.com, outlook.com, hotmail.com</p>
<div class="form-container">
<form action="#" id="subscription_form">
<div>
<input type="email" class="form" id="email" placeholder="name@example.com">
</div>
<div>
<input type="submit" id="submit" class="btn" role="button" />
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>and here is a little bit of css to make it nice:
*, *::after, *::before {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
}
body {
background: linear-gradient(to right, rgb(249 115 22), rgb(251 146 60));
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
h1 {
color: #ffffff;
text-align: center;
}
p {
color: #ffffff;
margin-bottom: 50px;
}
.form-container {
width: 20%;
}
.form-container input[type="email"] {
padding: 15px 6px;
border: none;
margin-bottom: 10px;
width: 100%;
}
.form-container input[type="email"]:focus-visible {
outline: none;
}
.form-container .btn {
background-color: rgb(38 38 38);
color: white;
padding: 14px 35px;
margin-bottom: 10px;
border: none;
transition: all .4s ease;
cursor: pointer;
}
.form-container .btn:hover {
background-color: rgb(71 85 105);
}Now we just need to add the necessary Javascript functionality.
First, we need to store some things in variables. We reference the entire form in the form variable, and the input field in the emailField variable.
const form = document.getElementById("subscription_form");
const emailField = document.getElementById("email");and also to create an array with the blacklisted email domains.
const emailBlacklist = [
"@aol.com",
"@yahoo.com",
"@outlook.com",
"@hotmail.com",
];Then we add an onsubmit event to the form which executes when it is submitted (or when the button is clicked). And within the event we create a few more variables with the “let” keyword.
Here first, we need to get and store the email domain from the entered email address. For this we will create a variable called “emailDomain”. We use the “indexOf()” string method on the email field value to find the domain. And then we use the “substring()” method to slice the domain off the email address and then store it in a variable called “emailVal”.
We declare another variable called “emailFound” and set it to false.
After this we create one more variable called “emailBlacklistLength” which will return the number of elements in the “emailBlacklist” array.
Once we have all these we will loop through the “emailBlacklistLength” to see if there is a match. Inside the for loop we just use a simple if statment to say what to do if there is a match. So if the entered email address has a domain that we have in the blacklist, we set the “emailFound” variable to true and break out of the loop.
form.onsubmit = function(e){
let emailDomain = emailField.value.indexOf("@");
let emailVal = emailField.value.substring(emailDomain);
let emailFound = false;
let emailBlacklistLength = emailBlacklist.length;
for(i=0; i < emailBlacklistLength; i++){
if(emailVal == emailBlacklist[i]){
emailFound = true;
break;
}
}
}Now, all we have to do is just show the alert message to the user. If the “emailFound” variable is true, we prevent the default behaviour of the form (i.e. we won’t let it to submit) and display the alert message after the for loop.
See full code on Codepen here.
Leave a reply
You must be logged in to post a comment.