jQuery form validation – Name, Email, Password, and Phone no validation
jQuery Form Validation: very easy and multiple futures of form validation. That’s like Name, Email, Password, and Phone no validation. In your web page set confirmation before submitting data in a form using jQuery validation.
jQuery validation a beautiful way makes it easy to validate user input while keeping your HTML. It makes user interface before register or form fill up in a web page.
In this validation, blank records cannot submit user. Name validates with alphabet letters and Email proper validation with valid email check. Password validation with decimal number and user gives the minimum six-character password.
You have to follow the example codes and try in your web pages. Look the below examples:
Bootstrap Form:
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery 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://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2 align="center" >Registration Form</h2> <p id="ErrorMsg" style="color:red"></p> <form class="form-horizontal" action="" onsubmit="return validateform();"> <div class="form-group"> <label class="control-label col-sm-2" for="name">Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" placeholder="Enter Your Name" name="name"> </div> </div> <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"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Phone:</label> <div class="col-sm-10"> <input type="test" class="form-control" id="phone" placeholder="Enter Phone No" name="phone"> </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> </div> </div> </div> </body> </html>
jQuery Validation:
<script> function validateform(){ var name=$('#name').val(); if(name==""){ $('#ErrorMsg').text('Please enter Name!'); $('#name').focus(); return false; } if($.isNumeric($('#name').val())){ $('#ErrorMsg').text('Please enter Name first letter alphabet!'); $('#name').focus(); return false; } var email=$('#email').val(); if(email==""){ $('#ErrorMsg').text('Please enter your Email!'); $('#email').focus(); return false; } var pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if(!pattern.test(email)){ $('#ErrorMsg').text('Please enter Valid Email!'); $('#email').focus(); return false; } var pwd=$('#pwd').val(); if(pwd==""){ $('#ErrorMsg').text('Please enter Password!'); $('#pwd').focus(); return false; } if(pwd.length <6){ $('#ErrorMsg').text('Please enter six Character Password!'); $('#pwd').focus(); return false; } var phone=$('#phone').val(); var pw_filter = /^[0-9-+]+$/; if(phone==""){ $('#ErrorMsg').text('Please enter Phone No!'); $('#phone').focus(); return false; } if(!pw_filter.test(phone)){ $('#ErrorMsg').text('Please enter Valid Phone No!'); $('#phone').focus(); return false; } if(phone.length < 10){ $('#ErrorMsg').text('Please enter minimum 10 digits Phone No!'); $('#phone').focus(); return false; } } </script>