JavaScript Email Validation

JavaScript Email Validation is a technique used to check whether an email address entered in a form follows the correct format. This validation helps ensure that the user provides a valid email address before submitting the form, reducing errors and ensuring data accuracy.

Key Features of JavaScript Email Validation:

• Ensures the email address entered is in a valid format (e.g., username@domain.com).
• Helps prevent incorrect data entry and submission to the server.
• Provides instant feedback to the user without requiring a server round trip.

Common Validation Techniques:

• Pattern Matching: Validates email format using a regular expression.
• Required Field Validation: Ensures that the email field is not left empty.

Example: Basic Email Validation

The following example demonstrates a simple email validation that checks whether the email address matches a valid format:

<form name="emailForm" onsubmit="return validateEmail()">
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
            
<script type="text/javascript">
function validateEmail() {
var email = document.forms["emailForm"]["email"].value;
var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if (!pattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
</script>

Explanation of Code:

• The function validateEmail() is triggered when the form is submitted.
• The email value is extracted using document.forms["emailForm"]["email"].value.
• A regular expression pattern is used to check if the entered email is valid. The pattern checks for the general structure of an email address (e.g., username@domain.com).
• If the email doesn't match the pattern, an alert is shown, and the form submission is halted using return false.
• If the email is valid, the form is submitted successfully with return true.

Advanced Example: Real-time Email Validation

This advanced example demonstrates real-time email validation as the user types in the email field:

<form name="emailForm" onsubmit="return validateEmail()">
Email: <input type="email" name="email" id="email" onkeyup="validateEmail()"><br>
<input type="submit" value="Submit">
</form>
            
<script type="text/javascript">
function validateEmail() {
var email = document.forms["emailForm"]["email"].value;
var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
var submitButton = document.querySelector('input[type="submit"]');
if (!pattern.test(email)) {
submitButton.disabled = true;  // Disable submit button if email is invalid
document.getElementById("error-message").style.display = "block";
} else {
submitButton.disabled = false; // Enable submit button if email is valid
document.getElementById("error-message").style.display = "none";
}
}
</script>
<div id="error-message" style="display:none;color:red;">Please enter a valid email address.>

Additional Example: Email Validation with Custom Criteria

This example demonstrates how to validate the email based on the following criteria:

The following code uses these criteria to validate the email address:

<script type="text/javascript">
function validateemail() {
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition=x.length) {
alert("Please enter a valid e-mail address n atposition:"+atposition+"n dotposition:"+dotposition);
return false;
}
}
</script>
            
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="Register">
</form>