Email Validation using HTML, CSS and JavaScript - Code With Bishal (Using Bootstrap)


Learn how to validate E-Mail using JavaScript

In this example you can learn HOW TO VALIDATE EMAIL USING JS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website and also don't forget to link the Bootstrap CSS. To Preview scroll the page. If you are having any problem viewing the code just refresh the page Validate Email is a lightweight and easy-to-use JS code that creates a Email validator. In this blog, there are four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the JS E-Mail validation using Bootstrap, after that you can copy the code and paste it [that's the fourth section]

You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
Few days ago
Show current time using JS
Few days ago
DIV ANIMATION with the help of HTML5 AND CSS
Few days ago

This is an example





HTML Code

<!DOCTYPE html>
<html>
<title>JavaScript Form Validation - Code With Bishal</title>
<body>
/* by Code With Bishal - www.codewithbishal.com*/
<div class="container">
<div class="py-5 text-center">
<label for="email-cwb">
<h3>Email Validation using HTML, CSS and JavaScript</h3>
</label>
<form action="">
<div class="field">
<input onkeyup="check()" id="email-cwb" class="form-control" type="text" autocomplete="off" placeholder="Enter Email Address">
<div class="icons">
<div class="icon1-cwb alert alert-danger" role="alert">Enter Valid Email</div>
<div class="icon2-cwb alert alert-success" role="alert">Valid Email</div>
</div>
<div>
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
Copy Contents

CSS Code

.icon1-cwb{
display: none;

}

.icon2-cwb{ display: none;
}

.btn{
display: none;
}

JS(Javascript) Code

<script>
const email = document.querySelector("#email-cwb");
const failed = document.querySelector(".icon1-cwb");
const success = document.querySelector(".icon2-cwb");
const btn = document.querySelector(".btn-primary");
let cwb = /^[^ ][email protected][^ ]+\.[a-z]{2,3}$/;
function check(){

if(email.value.match(cwb)){
email.style.borderColor = "#27ae60";
email.style.background = "#eafaf1";
failed.style.display = "none";
success.style.display = "block";
btn.style.display = "block";
}else{

email.style.borderColor = "#e74c3c";
email.style.background = "#fceae9";
failed.style.display = "block";
success.style.display = "none";
btn.style.display = "none";
}

if(email.value == ""){
email.style.borderColor = "lightgrey";
email.style.background = "#fff";
failed.style.display = "none";
success.style.display = "none";
btn.style.display = "none";
}

}

</script>