title: "Pretty Simple Content Slider" with Validate Plugin problems.
body: <p>So I'm using this jquery content slider plugin: <a href="http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/" rel="nofollow">slider</a>. And I'm also using the jquery validator plugin. So the I have a tab on the content slider to change your password. The problem is the validator's messages aren't appearing when you don't type in things correctly. Here's the jquery for the content slider:</p>
  
  <pre><code>$(function() {
      var current = 1;
  
      var iterate     = function(){
          var i = parseInt(current+1);
          var lis = $('#rotmenu').children('li').size();
          if(i&gt;lis) i = 1;
          display($('#rotmenu li:nth-child('+i+')'));
      }
      display($('#rotmenu li:first'));
      var slidetime = setInterval(iterate,90000);
  
      $('#rotmenu li').bind('click',function(e){
          clearTimeout(slidetime);
          display($(this));
          e.preventDefault();
      });
  
      function display(elem){
          var $this   = elem;
          var repeat  = false;
          if(current == parseInt($this.index() + 1))
              repeat = true;
  
          if(!repeat)
              $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                  $(this).animate({'opacity':'0.7'},700);
              });
  
          current = parseInt($this.index() + 1);
  
          var elem = $('a',$this);
  
              elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
  
          var info_elem = elem.next();
          $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
              $('h1',$(this)).html(info_elem.find('.info_heading').html());
              $(this).animate({'left':'0px'},400,'easeInOutQuad');
          });
  
          $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
              $('p',$(this)).html(info_elem.find('.info_description').html());
              $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
          })
          $('#rot1').prepend(
          $('&lt;img/&gt;',{
              style   :   'opacity:0',
              className : 'bg'
          }).load(
          function(){
              $(this).animate({'opacity':'1'},600);
              $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                  $(this).remove();
              });
          }
      ).attr('src','Images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
      );
      }
  });
  </code></pre>
  
  <p>And the html for the content slider</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;a class="back" href=""&gt;&lt;/a&gt;
  
      &lt;div class="rotator"&gt;
          &lt;ul id="rotmenu"&gt;
              &lt;li&gt;
                  &lt;a href="rot2"&gt;Password&lt;/a&gt;
                  &lt;div style="display:none;"&gt;
                      &lt;div class="info_image"&gt;2.jpg&lt;/div&gt;
                      &lt;div class="info_heading"&gt;&lt;/div&gt;
                      &lt;div class="info_description"&gt;
                          &lt;form id="change_Pass" action="" method="post"&gt;
                              Current Password&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;input type="password" id="change_password" name="change_password"&gt;&lt;br&gt;
                              New Password&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;input type="password" id="new_password" name="new_password"&gt;&lt;br&gt;
                              Verify Password&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;input type="password" id="verify_password" name="verify_password"&gt;&lt;br&gt;
                              &lt;input type="submit" value="Submit"&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="rot1"&gt;
              &lt;img src="" width="800" height="300" class="bg" alt=""/&gt;
              &lt;div class="heading"&gt;
                  &lt;!--&lt;h1&gt;&lt;/h1&gt;--&gt;
              &lt;/div&gt;
              &lt;div class="description"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now here's the jquery for the validator:</p>
  
  <pre><code>jQuery.validator.addMethod("passw", function(value, element) { 
      return this.optional(element) || /^(?=.*[\W])(?=.*[\d])(?=.*[A-Z]).{8,}$/.test(value);
  }, jQuery.format("Please enter a valid password"));
  
  $("#change_Pass").validate({
      onkeyup: false,
      errorClass: "req_mess",
      rules: {
          change_password: {
              required: true,
          },
          new_password: {
              required: true,
              passw: true,
          },
          verify_password: {
              required: true,
              equalTo: "#new_password",
          }
      },
      messages: {
          change_password: {
              required: "Please enter your current password",
          },
          new_password: {
              required: "Please enter a new password",
          },
          verify_password: {
              required: "Please enter a password that is a minimum of 8 characters and containers 1 upper case, 1 symbol, and 1 number",
              equalTo: "Your passwords did not match",
          }
      }
  });
  </code></pre>
  
  <p>The validator works for other forms no problem so i'm thinking it's the way this content slider is displaying information with this <code>$('p',$(this)).html(...)</code> is probably messing with the validator's messages. Or not, I really don't have any idea. I just know when you don't enter in a password that follow the regex, than it doesn't display the error message. I know the regex for the password works because it validates just fine on other forms. So any ideas on what's wrong and how to fix it? Thanks</p>