Help validating multiple text fields with error messages

Help validating multiple text fields with error messages

I am very new to JQuery. I am trying to create a basic form where the user will: type a name, enter comments in a textbox, click a radio button, click a check box. If the user does not do one or more of these things, I need an error message to appear besides the box or button on the particular area that is missing. I have everything working for the user name. I don't know how to work in that I need validation on all the other fields. I have tried adding another function below the first one, or adding names separated by a comma in the first function. Anything I have tried so far has made the page dysfunctional. Thanks for taking a look.

  2. <html>
  3.   <head>
  4.     <title>Basic Validation</title>
  5.     <script src="http://code.jquery.com/jquery-latest.js">
  6.     </script>
  7.   
  8.     <script>
  9.       $(function(){
  10.         $('#theButton')
  11.           .click(function(event) {
  12.  if ($("#userName").val()==""){
  13.  alert("empty!");
  14. $("#errUserName").text("Needs a user name!").removeClass("hideError").addClass("showError");

  16.  }else{
  17.  $("#errUserName").text("").removeClass("showError");
  18.  }
  19.           });
  20.       });
  21. </script>

  23. <style>
  24. .showError{
  25. display:block;
  26. color:#ff0000;
  27. }
  28. .hideError{
  29. display:none;
  30. color:#ff0000;
  31. }

  33. </style>
  34.   </head>

  36.   <body>
  37.   <form>
  38.     <label>User Name:</label><BR>
  39. <input type="text" id="userName" /><span id="errUserName" class="hideError">dsa</span>
  40. <br>Tell us about yourself.<br>
  41. <textarea name="comments" cols="25" rows="5"></textarea>    

  43.     

  45.     <div id="jobLike"><br>
  46.     Do you like your job?<BR>
  47.     Yes<input type="radio" name="answerYes" value="1" /> 
  48.     No<input type="radio" name="answerNo" value="2" /> 
  49. <p>
  50. Why?
  51. <br>
  52. <input type="checkbox" name="thePay" />Pay<br>
  53. <input type="checkbox" name="theBenefits" />Benefits<br>
  54. <input type="checkbox" name="theFlexibility" />Flexibility<br>
  55. <input type="checkbox" name="hateJob" />None, I hate it!<br>

  57. <p>
  58.     <input type="button" id="theButton" value="Validate!" />
  59.     </form>
  60.   </body>

  62. </html>