Simple Validation of form fields


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



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.