Close Menu
    Jquery

    Validating Email Using Regex Method in Jquery

    codex junctionBy Updated:No Comments2 Mins Read

    Validating an email using a regular expression (regex) in jQuery is a common approach for ensuring that the email entered by a user matches the expected format. Here’s a step-by-step guide on how to do this:

    **Step 1: Include jQuery in Your HTML Document**

    If you haven’t already, include the jQuery library in your HTML document by adding the following code within the `<head>` section of your HTML:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    Make sure to replace the URL with the latest version of jQuery if necessary.

    **Step 2: Create HTML Elements for Email Input and Validation**

    Create HTML elements for the email input field and a validation message. For example:

    <input type="email" id="emailInput" placeholder="Enter your email">
<span id="emailValidationMessage"></span>
<button id="validateButton">Validate Email</button>

    **Step 3: Write JavaScript/jQuery Code for Email Validation**

    Below the HTML elements, add jQuery code to validate the email using a regular expression and display a validation message:

    <script>
$(document).ready(function() {
// Regular expression for email validation
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

// Event handler for the button click
$("#validateButton").click(function() {
// Get the value from the email input field
var email = $("#emailInput").val();

// Check if the email matches the regex pattern
if (email.match(emailRegex)) {
// Valid email format
$("#emailValidationMessage").text("Valid email address.").css("color", "green");
} else {
// Invalid email format
$("#emailValidationMessage").text("Invalid email address.").css("color", "red");
}
});
});
</script>

    In this code, we use the `.click()` method to handle the button click event. We retrieve the email input value using `$(“#emailInput”).val()` and then use the `.match()` method to check if it matches the email regex pattern. If the email is valid, a message is displayed in green; otherwise, it’s displayed in red.

    **Step 4: Styling (Optional)**

    You can apply CSS styles to the validation message to make it more visually appealing.

    <style>
#emailValidationMessage {
font-size: 14px;
margin-top: 5px;
}
</style>

    With this code, when a user enters an email address and clicks the “Validate Email” button, the JavaScript code will use the regular expression to determine if the email follows a typical email format and display a validation message accordingly.

    Related Posts

    Leave A Reply