Validating Email Using Regex Method in Jquery


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:

$(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");

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.

#emailValidationMessage {
font-size: 14px;
margin-top: 5px;

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.

7 Best Website Hosting Providers Pros And Cons

Previous article

Facebook Social Login Error in WordPress

Next article

You may also like


Leave a reply

Your email address will not be published. Required fields are marked *

More in Jquery