Basic jQuery form validation


/ Published in: JavaScript
Save to your folder(s)

CSS:
.error
style the error class

Form HTML:
class="required"
makes the input field required

minlength="2"
makes the field require at least 2 characters


Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  4. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7. $('#my_form').validate();
  8. })
  9. </script>
  10. <style type="text/css">
  11. label {
  12. display:block;
  13. }
  14. input {
  15. display:block;
  16. }
  17. input.error {
  18. border: 1px solid red;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.  
  24. <form id="my_form" action="" method="post">
  25. <label>First Name</label>
  26. <input id="my_firstname" class="required" minlength="2" />
  27. <label>Last Name</label>
  28. <input id="my_lastname" class="required" minlength="2" />
  29. <label>Email</label>
  30. <input id="my_email" class="required email" />
  31. </form>
  32. </body>
  33. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.