Question

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

将表单粘贴到一个要点：http://gist.github.com/578270

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

Answer 1

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

HTML Shadowbox Link

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

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

从shadowbox内部进行表单验证的方法是什么？

1 个答案: