title: JQuery validate errorClass
body: <p>After having some cross browser issues with my JQuery validation I have narrowed it down to the fact that IE8 didn't like me using:</p>
  
  <pre><code>errorElement: 'validation-error',
  </code></pre>
  
  <p>All I want to achieve is for the validation error to appear directly after the input box on the same line. I have tried lots of examples on the internet and the closest I have got to is this:</p>
  
  <p>Error label displayed directly after the input box but the text within the input box is also applying the css for the error (This disappears upon correct input). I would simply like the error to appear with the correct css class applied but not the actual text inputted into the input box!</p>
  
  <p>My code is as follows:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function() {
              $( "#loginform" ).validate({
                  errorClass: 'validation-error'
                  ,errorElement:'span'
                  ,rules: {
                      text_user_id: {
                          required: true,
                          minlength: 4,
                          maxlength: 20
                      }
                      ,text_password: {
                          required: true,
                          minlength: 8,
                          maxlength: 20
                      }
                 }
                 ,messages: {
                      text_user_id: {
                          required: "Please enter a User ID",
                          minlength: $.format("At least {0} characters required!"),
                          maxlength: $.format("Maximum of {0} characters allowed!")
                      }
                      ,text_password: {
                          required: "Please enter a Password",
                          minlength: $.format("At least {0} characters required!"),
                          maxlength: $.format("Maximum of {0} characters allowed!")
                      }
                  }
              });
          });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.validation-error {
  float: none; 
  color: #FF0000;
  padding-left: 5px; 
  vertical-align: top; 
  </code></pre>
  
  <p>}</p>
  
  <p><strong>HTML (Form)</strong></p>
  
  <pre><code>&lt;form id="loginform" class="login-form" method="post" action="process_login.php"&gt;
  
  &lt;div id="login_form-error"&gt;
      &lt;?php
          if (isset($_GET['error']))
          {
              echo $_GET['error'];
          }
      ?&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;label&gt;User ID:&lt;/label&gt;
      &lt;input id="text_user_id" name="text_user_id" type="text" onkeyup="user_id_change()"/&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Password:&lt;/label&gt;
      &lt;input id="text_password" name="text_password" type="password" onkeyup="password_change()"/&gt;
  &lt;/div&gt;
  &lt;div class="login-form-buttons"&gt;
      &lt;input type="submit" value="Login"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>Please see image below, showing the css applied to both the input box text in addition to the error, and directly below when there are no errors the input text is back to it's default. To summaries I would like the input box text to not be affected by the presence of validation errors.</p>
  
  <p><img src="https://i.stack.imgur.com/9tqCp.png" alt="enter image description here"></p>
  
  <p>Thanks</p>