Advanced Search

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

Expand | Embed | Plain Text

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.