Email Address Validation Using jQuery
Email Address Validation: if you find a simple Email Address validation and apply in your project and web pages, you can follow this tutorial. In this tutorial, I will give you, a simple jQuery validation of email verification before submitting the email address.
Many web pages often require email verification before registration or sign up a user account. So the unusually data cannot store in the database of the project file.
In this tutorial, I will create a jQuery validation use jQuery on keyup and on blur function. You don’t have to need form submit button for the validation but I just define a submit button on the form page. Without click submit button you can check email validation.
Follow the example codes, that will help you to know more and you can apply these code in your work purpose.
Full Code Here:
<!DOCTYPE html> <head> <title>Email Validation</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <h2 align="center" > Validation Form</h2> <form class="form-horizontal" action=""> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> <script> $("#email").on("keyup blur", function() { var email=$('#email').val(); if(email==""){ $('#email').css('color','red'); $('#email').focus(); return false; } var email_filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if(!email_filter.test(email)){ $('#email').css('color','red'); $('#email').focus(); return false; } if(email_filter.test(email)){ $('#email').css('color','green'); $('#ErrorMsg').text(''); return false; } }); </script> </body> </html>