`
jQuery - Email Validation
Email Validation in jQuery
Here, Use this code for Email Validation by using jquery. We create one input element in HTML and alert message will show the validation error or success.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#empty_email').hide();
$('#invalid_email').hide();
$('#submit').click(function () {
$('#empty_email').hide();
$('#invalid_email').hide();
var email = $('#email').val();
if (email == '') {
$('#empty_email').show();
return false;
}
else if (IsEmail(email) == false) {
$('#invalid_email').show();
return false;
}
else {
alert("Email Validate Successfully");
}
});
});
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="email">Email :</label></td>
<td class="email">
<input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input">
<span class="error" id="empty_email" style="background:red; color:white">Enter your email-id here</span>
<span class="error" id="invalid_email" style="background:Green; color:white">Email-id is invalid</span>
</td>
</tr>
<tr>
<td>
<input type="submit" id="submit" value="Validate Email" />
</td>
</tr>
</table>
</form>
</body>
</html>Output
Click on validate email button without enter any text. It will show the following message.
Now enter the wrong email id format. It will show the following message.
Now enter the corrent Email id.\
Next