Posted on Feb. 25, 2021, 8 p.m. by Bishal ( 6919)
onkeyup
(one can also use JavaScript addEventListener keyup
or JavaScript onkeyup
) method to update the values of the input field.
.html
file write the following code:<element onkeyup="function()">
.js
file or inside the script (<script></script>
) tag write the following code:function(){
// code here
}
.html
file write the following code:<element id="inputField">
.js
file or inside the script (<script></script>
) tag write the following code:var object = document.getElementById("inputField");
object.onkeyup = function(){script};
.html
file write the following code:<element id="inputField">
.js
file or inside the script (<script></script>
) tag write the following code:var object = document.getElementById("inputField");
object.addEventListener("keyup", script);
onkeyup
. We will use .value
to get the value from the input field, .match
to match the value we got from the input field with our Regex or regular expression.
Invalid Email Address throws error and submit button is not visible
Valid email address does not throw any errors and submit button is visible
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Email Validation using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
script.js
<head> </head>
of your HTML document:<script src="script.js"></script>
script.js
file:const email = document.querySelector("#email");
const failed = document.querySelector(".failed");
const success = document.querySelector(".success");
const btn = document.querySelector(".btn-primary");
btn.style.display = "none";
let cwb = /^[^ ]+@[^ ]+\.[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";
}
}
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.success{
display: none;
}
.failed{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Email Validation using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="container p-5">
<input onkeyup="check()" id="email" class="form-control" autocomplete="off" placeholder="Enter Email Address">
<div class="icons">
<div class="failed alert alert-danger" role="alert">Enter Valid Email</div>
<div class="success alert alert-success" role="alert">Valid Email</div>
</div>
<button class="btn btn-primary">Submit</button>
</div>
</body>
</html>
.success, .failed{
display: none;
}
const email = document.querySelector("#email");
const failed = document.querySelector(".failed");
const success = document.querySelector(".success");
const btn = document.querySelector(".btn-primary");
btn.style.display = "none";
let cwb = /^[^ ]+@[^ ]+\.[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";
}
}