jquery - 从影子盒内部进行表单验证的方法是什么？

Question

好的，我在 shadowbox 中有一个表单，这个东西不会验证......我已经尝试过一百万种不同的方式。它也存在于我认为不会破坏它的 Wordpress 主题中。Jquery 加载在标题中。

表格被粘贴到一个要点中：http: //gist.github.com/578270

有任何想法吗？非常感谢，感觉我的头撞到了墙上。

Answer 1

诀窍是使用onFinish回调函数来触发对 Shadowbox 内的表单的验证。如果您像我一样为您的表单使用 ID，shadowbox 实际上会创建表单的副本，因此您需要在 shadowbox 本身内定位表单。我使用#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 -->

我希望这会有所帮助，如果需要，我很乐意更详细地解释。