Shadowbox 内部的表单验证方法有哪些？

Question

好吧，我在影子盒子里有一个表格，这个东西不会验证......我已经尝试过一百万种不同的方式。它也存在于 WordPress 主题中，我认为这不会破坏它。 Jquery 被加载到标头中。

该表格已粘贴到要点中： http://gist.github.com/578270

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

Answer 1

诀窍是使用 onFinish 回调函数来触发 Shadowbox 内表单的验证。如果您像我一样为表单使用 ID，shadowbox 实际上会创建表单的重复副本，因此您需要在 Shadowbox 本身内定位表单。我使用 #sb-player 来做到这一点。

HTML Shadowbox 链接

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

我希望这有帮助，我很高兴如果需要的话可以更详细地解释。