title: JS Validate - valid input & loagin bar while remote
body: <p>I'm making a simple javascript form with validation. I've already planned my sintax and everything but I need help with two things:</p>
  
  <p>I've templating my JS to output the error, but how can I change the inputbox color to "green" for example if the input is OK by validation?</p>
  
  <p>My templating error until now:</p>
  
  <pre><code>$.validator.setDefaults(
  {
  showErrors: function(map, list) 
  {
      this.currentElements.parents('label:first, .controls:first').find('.error').remove();
      this.currentElements.parents('.control-group:first').removeClass('error');
  
      $.each(list, function(index, error) 
      {
          var ee = $(error.element);
          var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');
  
          ee.parents('.control-group:first').addClass('error');
          eep.find('.error').remove();
          eep.append('&lt;p class="error help-block"&gt;&lt;span class="help-block error"&gt;' + error.message + '&lt;/span&gt;&lt;/p&gt;');
      });
      //refreshScrollers();
  }
  });
  </code></pre>
  
  <p>Can you help me inserting the function to change the color if it's OK? I just can't figure it out.</p>
  
  <p>Other thing is about showing a "loading" image while javascript is remotly checking if the user / email exists. I have everything ready and work, but I can't and don't know how to show a loading image while it checks ( before give error result ), neither tells the result is OK ( only in those fields ). My remote function:</p>
  
  <pre><code>$(function()
  {
  // validate signup form on keyup and submit
  $("#registerform").validate({
      rules: {
          firstname: "required",
          lastname: "required",
          username: {
              required: true,
              minlength: 3,
              remote:{
                  url: "inc/core/check_user.php",
                  type: "post",
                  data: {
                      username: function(){
                          return $( "#username" ).val();
                      }
                  }
              }
          },
          password: {
              required: true,
              minlength: 5
          },
          confpassword: {
              required: true,
              minlength: 5,
              equalTo: "#password"
          },
          scode: {
              required: true,
              minlength: 4,
              maxlength: 6,
              digits: true
          },
          scodeconf: {
              required: true,
              minlength: 4,
              maxlength: 6,
              digits: true,
              equalTo: "#scode"
          },
          email: {
              required: true,
              email: true,
              remote:{
                  url: "inc/core/check_email.php",
                  type: "post",
                  data: {
                      email: function(){
                          return $( "#email" ).val();
                      }
                  }
              }
          },
          topic: {
              required: "#newsletter:checked",
              minlength: 2
          },
          agree: "required",
          address: "required",
          zipcode: "required",
          city: "required",
          state: "required",
          country: "required",
          data: "required",
          age: "required"
      },
      messages: {
          firstname: $lang['register_jquery_pnome'],
          lastname: $lang['register_jquery_unome'],
          username: {
              required: $lang['register_jquery_username'],
              minlength: $lang['register_jquery_username_min'],
              remote: $lang['register_jquery_username_registado'],
          },
          password: {
              required: $lang['register_jquery_password'],
              minlength: $lang['register_jquery_password_min']
          },
          confpassword: {
              required: $lang['register_jquery_password'],
              minlength: $lang['register_jquery_password_min'],
              equalTo: $lang['register_jquery_password_equalto']
          },
          email:{
           required: $lang['register_jquery_email_valido'],
           remote: $lang['register_jquery_email_registado']
           },
          agree: $lang['register_jquery_tos'],
          address: $lang['register_jquery_morada'],
          zipcode: $lang['register_jquery_zipcode'],
          city: $lang['register_jquery_city'],
          state: $lang['register_jquery_state'],
          country: $lang['register_jquery_pais'],
          data: $lang['register_jquery_data'],
          age: $lang['register_jquery_age'],
          scode: {
              required: $lang['register_jquery_codigoseguranca'],
              minlength: $lang['register_jquery_codigoseguranca_min'],
              maxlenght: $lang['register_jquery_codigoseguranca_max'],
              digits: $lang['register_jquery_codigoseguranca_digits']
          },
          scodeconf: {
              required: $lang['register_jquery_codigoseguranca'],
              minlength: $lang['register_jquery_codigoseguranca_min'],
              maxlenght: $lang['register_jquery_codigoseguranca_max'],
              digits: $lang['register_jquery_codigoseguranca_digits'],
              equalTo: $lang['register_jquery_codigoseguranca_equalto']
          },
      }
  });
  
  
  });
  </code></pre>
  
  <p>Could someone help me with those two things? Thanks in advance!</p>