The JQuery Validate plugin provides a powerful validation feature for forms, making it easier to validate client forms, while providing a number of customization options to meet the needs of your application. The plugin bundles a set of useful validation methods, including URL and email validation, and provides an API to write user-defined methods.
The implementation steps are as follows:
Step1: Add a form label to the body tag
- <form id= "Login_form" action= "login.action" method= "POST" >
- <table cellpadding= "0" cellspacing= "0" border= "0" class= "form_table" >
- <tr>
- <TD valign= "Middle" align= "right" >
- Email:
- </td>
- <TD valign= "Middle" align= "left" >
- <input type= "text" class= "Inputgri" name= "email"/>
- <span style= "color:red" >${msg}</span>
- </td>
- </tr>
- <tr>
- <TD valign= "Middle" align= "right" >
- Password:
- </td>
- <TD valign= "Middle" align= "left" >
- <input type= "Password" class= "Inputgri" name= "password"/>
- </td>
- </tr>
- </table>
- <p>
- <input type= "Submit" class= "button" value= "Login?"/>
- <a href= "register.jsp" > not registered </a>
- </p>
- </form>
Step2: Import Validate plugin js file
- <script type= "Text/javascript" src= "Js/jquery.js" ></script>
- <script type= "Text/javascript" src= "Js/jquery.validate.min.js" ></script>
- <script type= "Text/javascript" src= "Js/messages_cn.js" ></script>
Step3: Write JS code
- <script>
- $ (document). Ready (function () {
- $ ("#login_form"). Validate ({
- Rules: {
- Email: {required:true, email:true},
- Password:{required:true,minlength:6,maxlength:16},
- },
- Messages: {
- Email: {Required: "Need to enter e-mail address", email: "E-mail format is incorrect"},
- Password: {required: "Need to enter password", minlength: "Password length between 6-16 characters", maxlength: "Password length between 6-16 characters"},
- }
- });
- });
- </script>
Reference Link: http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
Click to download the source code
JS validation control jquery Validate