0

わかりました、シャドウボックス内にフォームがありますが、これは検証されません...私はそれを何百万もの方法で試しました。また、それを壊しているとは思わないWordpressのテーマの中に住んでいます。Jquery がヘッダーに読み込まれます。

フォームは要点に貼り付けられます: http://gist.github.com/578270

何か案は？どうもありがとう、頭を壁にぶつけているような気がします。

4

1 に答える 1

0

秘訣は、onFinishコールバック関数を使用して、Shadowbox 内にあるフォームの検証をトリガーすることです。私のようにフォームに ID を使用すると、シャドウボックスは実際にフォームの複製コピーを作成するため、シャドウボックス自体内のフォームをターゲットにする必要があります。これには#sb-playerを使用しました。

HTML シャドーボックス リンク

<a href="#newsletter-signup-wrapper" class="newsletter-signup UniversLTStd-Cn">Newsletter Sign-up</a>

JavaScript/jQuery

$('a.newsletter-signup').click(function(){
    Shadowbox.open({
        width: 562,
        height: 395,
        player: 'inline',
        content: this.href,
        options: {
            onFinish: function(){
                $('#sb-player #newsletter-signup-form').validate();
            }
        }
    });
    return false;
});

HTML フォーム(フッターに非表示)

<div id="newsletter-signup-wrapper">
    <div id="newsletter-signup">
        <form action="" id="newsletter-signup-form" target="_parent" method="POST">
            <div class="gform_body">
                <ul class="gform_fields">
                    <li class="gfield">
                        <label class="gfield_label" for="first_name">First Name <span class="gfield_required">*</span></label>
                        <div class="ginput_container">
                            <input class="medium required" id="first_name" maxlength="40" name="first_name" size="20" type="text" />
                        </div>
                    </li>
                    <li class="gfield">
                        <label class="gfield_label" for="last_name">Last Name <span class="gfield_required">*</span></label>
                        <div class="ginput_container">
                            <input class="medium required" id="last_name" maxlength="80" name="last_name" size="20" type="text" />
                        </div>
                    </li>
                    <li class="gfield">
                        <label class="gfield_label" for="email">Email <span class="gfield_required">*</span></label>
                        <div class="ginput_container">
                            <input class="medium required" id="email" maxlength="80" name="email" size="20" type="text" />
                        </div>
                    </li>
                    <li class="gfield">
                        <label class="gfield_label" for="company">Company <span class="gfield_required">*</span></label>
                        <div class="ginput_container">
                            <input class="medium required" id="company" maxlength="40" name="company" size="20" type="text" />
                        </div>
                    </li>
                </ul>
            </div>
            <div class="gform_footer">
                <input class="button" type="submit" name="submit" value="Sign-up!">
            </div>
        </form>
    </div>
</div><!--// end #newsletter-signup-wrapper -->

これがお役に立てば幸いです。必要に応じて、さらに詳しく説明させていただきます。

于 2011-03-01T01:26:32.337 に答える