Question

So I’m using this jquery content slider plugin: slider. 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:

$(function() {
    var current = 1;

    var iterate     = function(){
        var i = parseInt(current+1);
        var lis = $('#rotmenu').children('li').size();
        if(i>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(
        $('<img/>',{
            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')
    );
    }
});

And the html for the content slider

<div id="content">
    <a class="back" href=""></a>

    <div class="rotator">
        <ul id="rotmenu">
            <li>
                <a href="rot2">Password</a>
                <div style="display:none;">
                    <div class="info_image">2.jpg</div>
                    <div class="info_heading"></div>
                    <div class="info_description">
                        <form id="change_Pass" action="" method="post">
                            Current Password<span style="color:red;">*</span><input type="password" id="change_password" name="change_password"><br>
                            New Password<span style="color:red;">*</span><input type="password" id="new_password" name="new_password"><br>
                            Verify Password<span style="color:red;">*</span><input type="password" id="verify_password" name="verify_password"><br>
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </li>
        </ul>
        <div id="rot1">
            <img src="" width="800" height="300" class="bg" alt=""/>
            <div class="heading">
                <!--<h1></h1>-->
            </div>
            <div class="description">
                <p></p>
            </div>    
        </div>
    </div>
</div>

Now here’s the jquery for the validator:

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",
        }
    }
});

The validator works for other forms no problem so i’m thinking it’s the way this content slider is displaying information with this $('p',$(this)).html(...) 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

Answer 1

This might be an easier/better fix.

After this line:

$('p',$(this)).html(info_elem.find('.info_description').html());

Add this line of code which sets up the validation on the form that was just added to the slider in the previous line:

setupPasswordValidate('#rot1 .description #changePass');

So you’ll also need to put your validate code into a function like this:

function setupPasswordValidate(selector)
  $(element).validate({
    onkeyup: false,
    errorClass: "req_mess",
    rules: {
        change_password: {
            required: true
        },
        new_password: {
            required: true,
            passw: true
        },
        verify_password: {
            required: true,
            equalTo: selector + " #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"
        }
    }
  });
}

The form validation needs to be set up each time html() is used to copy the form content. Getting the content with html() doesn’t copy the events and these are needed to do the validation on the form.