- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to validate email using jQuery?
To validate email using jQuery, use the regex pattern. You can try to run the following code to learn how to validate email using jQuery −
Example
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <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> <form action="" method="post" id="contactform"> <table class="mytable"> <tr> <td><label for="name">Name :</label></td> <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="error">Enter your name here</span></td> </tr> <tr> <td><label for="email">Email :</label></td> <td class="email"><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> </td> </td> </tr> <tr> <input type="submit" class="contactform-buttons" id="submit"value="Send" /> <input type="reset" class="contactform-buttons" id="" value="Clear" /> </tr> </tr> </table> </form> <div id="correct" style="color:gray;"></div> </body> </html>
Advertisements