Need of the Email validation:
Validation Scenario
Email Validation code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : Email Validation</title>
<link rel="stylesheet" href="../style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 flex justify-center">
<section class="w-auto h-auto mt-28 bg-white">
<header class="bg-violet-600 p-5 pl-6 pr-6">
<h2 class="text-3xl text-white tracking-wider">RAYS CODING : jQuery Email Validation</h2>
</header>
<form action="#" method="post" class="p-5">
<input type="Email" id="useremail" class="w-full h-12 p-3 border-2 border-violet-600 focus:outline-none focus:border-violet-600 hover:border-violet-600" placeholder="Enter Your Name">
<div class="mt-5 bg-red-300 p-3 text-red-950 hidden" id="error-message"></div>
<button type="submit" class="mt-5 bg-violet-600 p-3 w-full text-white font-semibold tracking-wider" id="submit-button">SUBMIT</button>
</form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
jQuery Validation
<script>
$(document).ready(function () {
$('#submit-button').on('click', function (e) {
e.preventDefault();
let input_val = $('#useremail').val();
let email_regexp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (input_val === '') {
$('#error-message').removeClass('hidden').text('Email address is required. Please provide a valid email address to proceed.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
return false;
});
} else if (!input_val.match(email_regexp)) {
$('#error-message').removeClass('hidden').text('The email address you entered seems to be invalid. Please check the format and try again.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
return false;
});
} else {
$('#error-message').text(input_val).removeClass('hidden bg-red-300 text-red-950').addClass('bg-green-300 text-green-950').fadeIn().delay(3000).fadeOut(function () { $(this).addClass('hidden'); return true; });
}
});
});
</script>