How To Validate Email In Jquery

by

In this blog post, we will learn how to validate an email using jQuery, a popular JavaScript library. Email validation is a common requirement in web forms and applications, and adding this functionality with jQuery is simple and efficient.

Step 1: Include jQuery in your project

First, make sure you’ve included the jQuery library in your project. You can either download it from the official website or include it using a CDN, such as Google or Microsoft. For this tutorial, we will use Google’s CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 2: Add an email input field to your HTML form

Next, create an HTML form with an email input field. For our example, the form will look like this:

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
  <div id="emailError" style="display:none; color:red;">Invalid email address</div>
</form>

Step 3: Write a function to validate email using jQuery

Now, let’s write a function to validate the email address. We will use a regular expression to check whether the input matches the pattern of a valid email address. Here’s the function:

function isValidEmail(email) {
  var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return regex.test(email);
}

Step 4: Validate the email address on form submission

We will now use the isValidEmail() function to validate the email address when the user submits the form. If the email is invalid, we will display an error message and prevent the form from being submitted.

$("#myForm").submit(function(e) {
  e.preventDefault();

  var email = $("#email").val();

  if (!isValidEmail(email)) {
    $("#emailError").show();
  } else {
    $("#emailError").hide();
    // Submit the form or perform any other desired actions
  }
});

Conclusion

In this blog post, we learned how to validate an email using jQuery. By following these steps, you can easily add email validation to your web forms and applications. Keep in mind that client-side validation should not be your only line of defense, as it can be bypassed by malicious users. Always make sure to perform server-side validation as well to ensure the security and integrity of your application.