How to validate Email Id in jQuery ?

10 Nov, 2021
The task is to implement, how Email is validated in jQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
jQuery is widely famous for its motto of “Write less, do more.” It simply means that you can achieve your goal by just writing a few lines of code.
Approach: You can validate Email using jQuery by using the regex pattern. Regex expression is used for search operation and they are special strings representing a pattern to be matched.
Example:
HTML
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>      <style>        body {            text-align: center;        }          .contactform-buttons {            background-color: #4CAF50;            /* Green */            border: none;            color: white;            padding: 15px 32px;            text-align: center;            text-decoration: none;            display: inline-block;            font-size: 16px;        }    </style>      <script>        $(document).ready(function () {            $('.error').hide();            $('#submit').click(function () {                var name = $('#name').val();                var email = $('#email').val();                  if (name == '') {                    $('#name').next().show();                    return false;                }                if (email == '') {                    $('#email').next().show();                    return false;                }                if (IsEmail(email) == false) {                    $('#invalid_email').show();                    return false;                }                $.post("", $("#myform").serialize(),                 function (response) {                    $('#myform').fadeOut('slow', function () {                        $('#correct').html(response);                        $('#correct').fadeIn('slow');                    });                });                return false;            });        });        function IsEmail(email) {            var regex =/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;            if (!regex.test(email)) {                return false;            }            else {                return true;            }        }    </script></head>  <body>    <center>        <h1 style="color:green">GeeksforGeeks</h1>          <form action="" method="post" id="contactform">              <label for="name">Name:</label>            <input name="name" id="name" type="text"                 placeholder="Please enter your name"                 class="contact-input">            <span class="error">                Enter your name here            </span>              <label for="email">Email :</label>            <input name="email" id="email" type="text"                 placeholder="Please enter your email"                 class="contact-input">            <span class="error">                Enter your email-id here            </span>            <span class="error" id="invalid_email">                Email-id is invalid            </span>              <br /><br />            <input type="submit"                 class="contactform-buttons"                 id="submit" value="Send" />              <input type="reset"                 class="contactform-buttons"                 id="" value="Clear" />        </form>          <div id="correct"             style="color:gray;">        </div>    </center></body>  </html>
Output:
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-RegExp
jQuery-Methods
jQuery-Questions
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS