jquery - プラグインの問題を検証する「PrettySimpleContentSlider」。

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(...)は、おそらくバリデーターのメッセージを台無しにしていると思います。そうでなくても、私にはまったくわかりません。正規表現に続くパスワードを入力しないと、エラーメッセージが表示されないので、わかります。パスワードの正規表現は、他のフォームでも問題なく検証されるため、機能することはわかっています。では、何が問題で、どのように修正するかについてのアイデアはありますか？ありがとう

score 1 · Accepted Answer

これを試して：

この行を置き換えます：

$('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）を使用してこれを試しましたが、検証が正しくコピーされていないようです。

編集：これに関する1つの問題は、デタッチされたフォームが元に戻されない限り、次の反復が発生したときに失われることです。これに対する簡単な修正は、フォーム（要素var）をグローバル変数に格納し、次の反復の前に元の場所に追加することです。

score 1 · Accepted Answer

これは、より簡単でより良い修正かもしれません。

この行の後：

$('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()もイベントはコピーされません。これらはフォームで検証を行うために必要です。

jquery - プラグインの問題を検証する「PrettySimpleContentSlider」。

2 に答える 2

Related

Reference