Today almost website have user registration functionality in their website. So before sending user data to server, you can validate from the Javascript.
In this article, we will see how to check if the given email address is valid or not. We will use Javascript regular expression to check whether email address is valid or not.
const regex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
So based on the above expression, you can check with the email address. Here is the function that checks whether given email is valid or not.
function emailValidate(email) {
const regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(email);
}
Here is full code with HTML.
<!DOCTYPE html>
<html>
<head>
<title>Email validation check</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="mb-3">
<label for="email" class="form-label">Email address:</label>
<input type="text" id="email" class="form-control" placeholder="Email address">
</div>
</div>
<button class="btn btn btn-primary" id="email-validate">Validate EMail</button>
<div class="mt-3" id="result"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#email-validate').on('click', function() {
var email = $("#email").val();
var result = emailValidate(email);
if (result) {
$("#result").html('<div class="alert alert-success">'+email+' is valid.</div>');
} else {
$("#result").html('<div class="alert alert-danger">'+email + ' is not valid.</div>');
}
});
});
function emailValidate(email) {
const regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(email);
}
</script>
</body>
</html>
Note that this only validate email format. If you also want to check whether the email address is exists or not, then you need to send email link with varification token from server language. Also there may be chances the user disable the Javscript. So it is good idea to also validate server side also.
Thank you for taking time to read article.
