Question

所以我正在使用这个jquery内容滑块插件：slider。我也在使用jquery验证器插件。所以我在内容滑块上有一个标签来更改你的密码。问题是当您没有正确输入内容时，验证程序的消息不会出现。这是内容滑块的jquery：

$(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')
    );
    }
});

内容滑块的html

<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>

现在这里是验证器的jquery：

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

验证器适用于其他形式没有问题所以我认为这个内容滑块显示信息的方式$('p',$(this)).html(...)可能会弄乱验证器的消息。或者不，我真的不知道。我只知道当你没有输入跟在正则表达式之后的密码时，它不会显示错误信息。我知道密码的正则表达式有效，因为它在其他表单上验证得很好。那么关于什么是错的以及如何解决它的任何想法？感谢

Answer 1

试试这个：

替换此行：

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

有了这些：

$('p',$(this)).html();
var elements = info_elem.find('.info_description').detach();
$('p',$(this)).append(elements);

您的表单已定义验证选项，并通过验证插件应用事件处理程序。问题是当您的代码仅复制表单的HTML（作为文本）时。使用detach（）删除实际的dom节点，并将这些节点（包括验证事件）附加到滑块。

注意：我首先尝试使用clone（true）而不是分离，但它似乎没有正确复制验证。

编辑：这样做的一个问题是，当下一次迭代发生时，分离的形式会丢失，除非它被放回去。对此的一个简单修复是将表单（元素var）存储在全局变量中，并在下一次迭代之前将其追加到它所来自的位置。

Answer 2

这可能是一个更容易/更好的解决方法。

这一行之后：

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

添加以下代码行，在刚刚添加到上一行滑块的表单上设置验证：

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

因此，您还需要将验证代码放入如下函数中：

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

每次使用html()复制表单内容时，都需要设置表单验证。使用html()获取内容不会复制事件，这些是在表单上进行验证所必需的。

“非常简单的内容滑块”，带有Validate插件问题。

2 个答案: