How To Validate Email Using jQuery

Websolutionstuff | Nov-09-2022 | Categories : Laravel PHP jQuery

In this article, we will see how to validate email using jquery. we will use regular expression(regex) for email validation in jquery. Javascript is used to validate form data on the client-side server or web browser. Client-side validation is faster than server-side validation. So, we will learn how to validate email addresses in javascript.

Email address validation is a little bit is hard compared to other form validation. So, we will create a regex for email validation. Using regex we will check three parts of the email address, the first part is a user name after @ symbol and the third part is a domain name.

So, let's see how to validate email using javascript, jquery to validate email addresses, and email validation using regex.

The first part of the email address contains characters.

  • Uppercase and lowercase letters (A-Z and a-z)
  • Numeric characters (0-9)
  • Special characters not allow - ! # $ % & ' * + - / = ? ^ _ ` { | } ~

The domain name contains.

  • Letters
  • Digits
  • Hyphens
  • Dots
Example:

In this example, we will validate email using regex with on click of a button. 

<!DOCTYPE html>
<html>
  <head>
    <title>How To Validate Email Using jQuery - Websolutionstuff</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <form>
      <p>Enter an email address:</p>
      <input id='email'>
      <button type='submit' id='validate'>Validate Email</button>
    </form>
    <div id='result'></div>
    <script>
      function validateEmail(email) {
        let res = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return res.test(email);
      }
      function validate() {
        let result = $("#result");
        let email = $("#email").val();
        result.text("");
        if(validateEmail(email)) {
          result.text(email + " is valid");
          result.css("color", "green");
        } else {
          result.text(email + " is not valid");
          result.css("color", "red");
        }
        return false;
      }
      $("#validate").on("click", validate);
    </script>
  </body>
</html>

Output:

how_to_validate_email_address_using_jquery

 

 

Example:

In this example, we will validate the email address on input.

<!DOCTYPE html>
<html>
    <head>
        <title>How To Validate Email Using jQuery - Websolutionstuff</title>
        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    </head>
    <body>
        <h2>How To Validate Email Using jQuery - Websolutionstuff</h2>
        <form>
            <p>Enter an email address:</p>
            <input id='email'>
            <button type='submit' id='validate'>Validate Email</button>
        </form>
        <div id='result'></div>
        <script>
            const validateEmail = (email) => {
                return email.match(/^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/);
            };

            const validate = () => {
            const $result = $('#result');
            const email = $('#email').val();
            $result.text('');

            if (validateEmail(email)) {
                $result.text(email + ' is valid :)');
                $result.css('color', 'green');
            } else {
                $result.text(email + ' is not valid :(');
                $result.css('color', 'red');
            }
            return false;
            }

            $('#email').on('input', validate);
        </script>
    </body>
</html>

 

Example:

Check the list of below regex examples.

/^\S+@\S+\.\S+$/

/^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

/^[!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])$/

 


You might also like:

Recommended Post
Featured Post
How To Install PHP XML Extension In Ubuntu
How To Install PHP XML Extensi...

In this article, I will guide you through the process of installing the PHP XML extension in Ubuntu. The PHP XML extensi...

Read More

Jul-19-2023

Laravel 8 PDF Generate Example
Laravel 8 PDF Generate Example

In this article, we will see a laravel 8 pdf generate example. For generating PDF file we will use the laravel-dompdf pa...

Read More

Oct-17-2020

How To Get Last Record In Laravel 8
How To Get Last Record In Lara...

In this example, we will see how to get the last record in laravel 8. You can simply get the last record using laravel 8...

Read More

Jan-26-2022

How to Image Upload with Preview in Angular 17
How to Image Upload with Previ...

In this article, we'll see how to image upload with a preview in angular 17. Here, we'll learn about the an...

Read More

Apr-01-2024