title: jQuery Form Validation code with HTML
body: <p>Hi I'm a student programmer and I am writing and using code that I have studied to build a layer of client side validation to my registration form, as this is the first time I've done this, I can't quite get it to work. If anyone with more experience than me would like to take a look at the HTML and Javascript quickly, they will hopefully be able to tell me why that when I write into my form fields and submit the validation code that I have written is not doing anything.</p>
  
  <p>Thanks for helping me out as I continue to learn.</p>
  
  <p></p>
  
  <pre><code>        &lt;div class="content"&gt;
              &lt;div id="form_wrapper" class="form_wrapper"&gt;
                  &lt;form class="register active" action="regprocess.php" method = "post"&gt;
                      &lt;h3 class="font"&gt;REGISTER&lt;/h3&gt;
                      &lt;div class="column"&gt;
                          &lt;div&gt;
                              &lt;label for="t1"&gt;Firstname:&lt;/label&gt;
                              &lt;input type="text" id="t1" name="firstname" class="required" /&gt;
                              &lt;span class="errorMessage"id="errormessage_firstname"&gt;This is an error&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="t2"&gt;Username:&lt;/label&gt;
                              &lt;input type="text" id="t2" name="username" class="required" /&gt;
                              &lt;span class="errorMessage"id="errormessage_username"&gt;This is an error&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="t3"&gt;Email:&lt;/label&gt;
                              &lt;input type="text" id="t3" name="email" class="required"/&gt;
                              &lt;span class="errorMessage"id="errormessage_email"&gt;This is an error, please give a valid email address.&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="column"&gt;
                          &lt;div&gt;
                              &lt;label for="t4"&gt;Lastname:&lt;/label&gt;
                              &lt;input type="text" id="t4" name="lastname" class="required"/&gt;
                              &lt;span class="errorMessage"id="errormessage_lastname"&gt;This is an error&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="p1"&gt;Password:&lt;/label&gt;
                              &lt;input type="password" id="p1"name ="pass" class="required" /&gt;
                              &lt;span class="errorMessage"id="errormessage_pass"&gt;This is an error&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="p1"&gt;Re-enter Password:&lt;/label&gt;
                              &lt;input type="password" id="p2" name="pass" class ="required"/&gt;
                              &lt;span class="errorMessage" id="errormessage_pass"&gt;This is an error&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="bottom"&gt;
                          &lt;div class="remember"&gt;
  
                          &lt;/div&gt;
                          &lt;input type="submit" value="Register" /&gt;
                          &lt;a href="index.html" rel="login" class="linkform"&gt;You have an account already? Log in here&lt;/a&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;script type="text/javascript"&gt;
  
                      $('form').submit(function(event){
  
  
                          var isErrorFree = true;
                          //iterate through required form elements, check if valid
                          $('input.required',this).each(function(){
                              if(validateElement.isValid(this) == false){
                                  isErrorFree = false;
                              };
                          });
                      return isErrorFree;
                      });
  
                      var validateElement = {
  
                          isValid:function(element){
                              var isValid = true;
                              var $element = $(element);
                              var id = $element.attr('id');
                              var name = $element.attr('name')
                              var value = $element.val();
  
                              var type = $element[0].type.toLowerCase();
  
                              switch(type){
                                  case 'text':
                                  case 'password':
                                  if (value.length == 0 ||
                                      value.replace(/\s/g,'').length == 0){ isValid = false;}
                                      break;
                                      function emailReg2(){
                                      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                                      if(!emailReg.test(email)){
                                          isValid = false;
                                          var method =  isValid ? 'removeClass' : 'addClass';
                                      };
                                      var method =  isValid ? 'removeClass' : 'addClass';
  
                                      $('#errorMessage_' + name)[method]('showErrorMessage');
                                      $('label[for="' + id + '"]')[method]('error');
  
                                      return isValid;
  
  
                              }
  
                      }
                      }
                      };
  
                  &lt;/script&gt;
  </code></pre>