ajax - Magento - 在表单中使用 ajax 更新时事通讯弹出代码

Question

我有以下在 cms 页面中使用的代码弹出我遇到的问题是，如果您将电子邮件地址输入字段留空并点击提交（在“获取代码”按钮的情况下，您会短暂看到红色验证消息，但随后隐藏表单，显示隐藏的 div。

为什么或如何阻止此过程，我希望它验证但继续显示隐藏的 div 内容。下面是代码。

<div id="pop-confirm" style="display: none;">
<h1 style="color: #000000; font-weight: bold;">THANKS!</h1>
<p>&nbsp;</p>
<h2>Use code: <strong>extra15</strong><br /> for 15% off your purchase.</h2>
</div>
<form id="newsletter-validate-detail" action="home/send" method="post" onSubmit="new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); return false;">
<div class="block-content">
<h2>ENTER YOUR EMAIL<br /> AND GET</h2>
<div class="form-subscribe-header">
<h1>15% OFF</h1>
<br />
<h1>EVERYTHING!</h1>
</div>
<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" type="text" name="email" /></div>
<br />
<div class="actions"><button class="button" title="Get Code" type="submit"><span><span>Get Code</span></span></button></div>
<br />
<p><em>* Promotion ends April 6th</em></p>
</div>
</form>
<script type="text/javascript">// <![CDATA[
        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
// ]]></script>

我对 ajax 很陌生，所以也许我做错了什么。

任何想法或建议将不胜感激。

谢谢

Answer 1

尝试将您的 onSubmit 更改为以下内容：

onSubmit="if(newsletterSubscriberFormDetail.validator.validate()){ new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); } return false;"`

这将在使用 AJAX 提交表单之前触发验证器。非常适合我:)