Jquery Easy Validator
Jquery Easy Validator
- $(document).ready(function() {
- // JQuery Form Validator By Aleksandre Mumladze
- $("#submit").click(function() {
-
- // Configuration
-
- var formIdorClass = "form"; // Form Id or Class
-
- var fieldError = "error"; // Error class ( warning : Not ID )
- var usernameIdOrClass = "#username";
- var passwordIdOrClass = "#password";
- var emailIdOrClass = "#email";
-
- // Minimal Length
-
- var naMinLen = "6"; // username Max Length
- var paMinLen = "8"; // password Max Length
- var emMinLen = "7"; // email Max Length
-
- // Maximal Length
-
- var naMaxLen = "10"; // username Max Length
- var paMaxLen = "20"; // password Max Length
- var emMaxLen = "30"; // email Max Length
-
- // Get Values
-
- var naVal = $(usernameIdOrClass).val(); // username Value
- var paVal = $(passwordIdOrClass).val(); // password Value
- var emVal = $(emailIdOrClass).val(); // email Value
- // Count Values
-
- var naLen = naVal.length; // username Length
- var paLen = paVal.length; // password Length
- var emLen = emVal.length; // email Length
-
- $(formIdorClass).find(":input").removeClass(fieldError);
-
- var errorLog = "Form log : Field error occurred !";
-
- if(naLen<naMaxLen&&naLen>naMinLen) {
- if(paLen<paMaxLen&&paLen>paMinLen) {
- if(emLen<emMaxLen&&emLen>emMinLen) {
- $("#result").text("Query Successed !");
- } else { console.log(errorLog); $(emailIdOrClass).addClass(fieldError); $("#result").text("Email must be between " + emMinLen + " and " + emMaxLen); }
-
- } else { console.log(errorLog); $(passwordIdOrClass).addClass(fieldError); $("#result").text("Password must be between " + paMinLen + " and " + paMaxLen); }
-
- } else { console.log(errorLog); $(usernameIdOrClass).addClass(fieldError); $("#result").text("Username must be between " + naMinLen + " and " + naMaxLen); }
-
- return false;
- });
-
- });
- <!doctype>
- <head>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script type="text/javascript" src="pack.js"></script>
- <style type="text/css">
- .error {
- border:1px solid red;
- }
- </style>
- </head>
- <body>
- <form id="form">
- <input name="username" id="username" type="text" class="input">
- <input name="password" id="password" type="password" class="input">
- <input name="email" id="email" type="text" class="input">
- <button id="submit" name="submit">Submit</button>
- <div id="result"></div>
- </form>
- </body>