Advanced Search

Simple Validation of form fields

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function checkForm(){
  2. //get the form input
  3.  
  4. $("input#firstn").blur(function(){
  5. 	var thecheckvar = $(this).val();
  6. 	if (thecheckvar.length < 2 ){
  7. 	//alert("the first name is: "+firstName+" and is too short!");
  8. 	$("#fname_e").show();
  9. 	$("input#firstn").css('background-color', 'red');
  10. 	$("input#submitbutton").hide();
  11. 	} else {
  12. 	//alert("Ok, your good to go!");
  13. 	$("#fname_e").hide();
  14. 	$("input#firstn").css('background-color', '#f5d286');
  15. 	}
  16. });
  17.  
  18. $("input#lastn").blur(function(){
  19. 	var thecheckvar = $(this).val();
  20. 	if (thecheckvar.length < 4 ){
  21. 		$("#lname_e").show();
  22. 		$("input#lastn").css('background-color', 'red');
  23. 		$("input#submitbutton").hide();
  24. 	} else {
  25. 	//alert("Ok, your good to go!");
  26. 	$("#lname_e").hide();
  27. 	$("input#lastn").css('background-color', '#f5d286');
  28. 	}
  29. });
  30.  
  31. $("textarea#address").blur(function(){
  32. 	var thecheckvar = $(this).val();
  33. 	if (thecheckvar.length < 20 ){
  34. 		$("#address_e").show(400);
  35. 		$("textarea#address").css('background-color', 'red');
  36. 		$("input#submitbutton").hide(400);
  37. 	} else {
  38. 	//alert("Ok, your good to go!");
  39. 	$("#address_e").hide(400);
  40. 	$("textarea#address").css('background-color', '#f5d286');
  41. 	}
  42. });
  43.  
  44.  
  45. $("input#theemail").blur(function(){
  46. 	var thecheckvar = $(this).val();
  47. 	if (thecheckvar.length < 8 ){
  48. 		$("#email_e").show();
  49. 		$("input#theemail").css('background-color', 'red');
  50. 		$("input#submitbutton").hide();
  51. 	} else {
  52. 	//alert("Ok, your good to go!");
  53. 		$("#email_e").hide();
  54. 		$("input#theemail").css('background-color', '#f5d286');
  55. 	}
  56. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.