title: jquery validation for select box onchange
body: <p>i design show/hide <code>div</code> select box using select2 and validate using jquery validation plugin. this worked but when i select empty value(select a color) validation show success (green color) but if i click submit button i see red color. </p>
  
  <p>JS:</p>
  
  <pre><code> $(document).ready(function () {
       $(".lstColors").change(function () {
           $('div.box').hide();
           $('div.box.' + $(this).val()).show();
       }).change();
  
  
       $('form').validate({
           rules: {
               firstname: {
                   minlength: 3,
                   maxlength: 15,
                   required: true
               },
               lastname: {
                   minlength: 3,
                   maxlength: 15,
                   required: true
               }
           },
           highlight: function (element, errorClass, validClass) {
               if (element.type === "radio") {
                   this.findByName(element.name).addClass(errorClass).removeClass(validClass);
               } else {
                   $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
                   $(element).closest('.form-group').find('i.fa').remove();
                   $(element).closest('.form-group').append('&lt;i class="fa icon-plane icon-2x form-control-feedback"&gt;&lt;/i&gt;')
               }
           },
           unhighlight: function (element, errorClass, validClass) {
               if (element.type === "radio") {
                   this.findByName(element.name).removeClass(errorClass).addClass(validClass);
               } else {
                   $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                   $(element).closest('.form-group').find('i.fa').remove();
                   $(element).closest('.form-group').append('&lt;i class="fa icon-plane icon-2x  form-control-feedback"&gt;&lt;/i&gt;');
               }
           },
           errorElement: 'span',
           errorClass: 'help-block',
           errorPlacement: function (error, element) {
               if (element.parent('.input-group').length) {
                   error.insertAfter(element.parent());
               } else {
                   error.insertAfter(element);
               }
           }
       });
  
       $('form').on('submit', function () {
           $(this).addClass('submitted');
       });
  
       $("#lstColors").select2({
           placeholder: "Select a Color",
           triggerChange: true,
           allowClear: true,
           width: "200px"
       }).on('change', function () {
           if ($('form').hasClass('submitted')) $('form').valid();
       });
   });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="firstname"&gt;Nome:&lt;/label&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="input-group select2-bootstrap-prepend"&gt; &lt;span class="input-group-addon"&gt;&lt;i class=" icon-male"&gt;&lt;/i&gt;&lt;/span&gt;
  
                          &lt;input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="lstColors" class="control-label"&gt;Favorite Colors:&lt;/label&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="input-group select2-bootstrap-prepend"&gt;
                          &lt;select id="lstColors" class="lstColors required"&gt;
                              &lt;option value=""&gt;&lt;/option&gt;
                              &lt;option value="red" selected&gt;Red&lt;/option&gt;
                              &lt;option value="green"&gt;Green&lt;/option&gt;
                              &lt;option value="blue"&gt;Blue&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;div class="red box"&gt;test&lt;/div&gt;
                          &lt;div class="green box"&gt;You have selected &lt;strong&gt;green option&lt;/strong&gt; so i am here&lt;/div&gt;
                          &lt;div class="blue box"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now, i need to show red color after choose empty value(on change). how do can fix this ?</p>
  
  <p><a href="http://jsfiddle.net/Tdafh/6/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>