Jquery Easy Validator

Jquery Easy Validator

  1. $(document).ready(function() {

  2. // JQuery Form Validator By Aleksandre Mumladze

  3. $("#submit").click(function() {
  4. // Configuration
  5. var formIdorClass = "form"; // Form Id or Class
  6. var fieldError = "error"; // Error class ( warning : Not ID )

  7. var usernameIdOrClass = "#username";
  8. var passwordIdOrClass = "#password";
  9. var emailIdOrClass = "#email";
  10. // Minimal Length
  11. var naMinLen = "6"; // username Max Length
  12. var paMinLen = "8"; // password Max Length
  13. var emMinLen = "7"; // email Max Length
  14. // Maximal Length
  15. var naMaxLen = "10"; // username Max Length
  16. var paMaxLen = "20"; // password Max Length
  17. var emMaxLen = "30"; // email Max Length
  18. // Get Values
  19. var naVal = $(usernameIdOrClass).val(); // username Value
  20. var paVal = $(passwordIdOrClass).val(); // password Value
  21. var emVal = $(emailIdOrClass).val(); // email Value

  22. // Count Values
  23. var naLen = naVal.length; // username Length
  24. var paLen = paVal.length; // password Length
  25. var emLen = emVal.length; // email Length
  26. $(formIdorClass).find(":input").removeClass(fieldError);
  27. var errorLog = "Form log : Field error occurred !";
  28. if(naLen<naMaxLen&&naLen>naMinLen) {
  29. if(paLen<paMaxLen&&paLen>paMinLen) {
  30. if(emLen<emMaxLen&&emLen>emMinLen) {

  31. $("#result").text("Query Successed !");

  32. } else { console.log(errorLog); $(emailIdOrClass).addClass(fieldError); $("#result").text("Email must be between " + emMinLen + " and " + emMaxLen); }
  33. } else { console.log(errorLog); $(passwordIdOrClass).addClass(fieldError); $("#result").text("Password must be between " + paMinLen + " and " + paMaxLen); }
  34. } else { console.log(errorLog); $(usernameIdOrClass).addClass(fieldError); $("#result").text("Username must be between " + naMinLen + " and " + naMaxLen); }
  35. return false;

  36. });
  37. });

  1. <!doctype>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4. <script type="text/javascript" src="pack.js"></script>
  5. <style type="text/css">
  6. .error {
  7. border:1px solid red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <form id="form">
  13. <input name="username" id="username" type="text" class="input">
  14. <input name="password" id="password" type="password" class="input">
  15. <input name="email" id="email" type="text" class="input">
  16. <button id="submit" name="submit">Submit</button>
  17. <div id="result"></div>
  18. </form>
  19. </body>