Zurb foundation 基金会遵守5.5 Ajax提交复制

在5.4上它可以工作，但在5.5上有两个请求

 $('#sendSms form').on('valid.fndtn.abide', function () {
            $('#sendSms button').disable(true);
            $.post(app.dir + '/sms', $('#sendSms form').serialize(), function (data) {
                               $('#sendSms button').disable(false);
                },
             'json' // I expect a JSON response
            );
        });


<div id="sendSms" class="reveal-modal" data-reveal>
    <h2>Send sms</h2>

    <form data-abide="ajax">
        <div class="SmsMessage-field">
            <label>
                Body <small>required</small>
                <input type="text" maxlength="300" required name="SmsMessage" id="SmsMessage" />
            </label>
            <small class="error"></small>
        </div>
        <div class="SmsPhoneNo-field">
            <label>
                PhoneNo <small>required</small>
                <input name="SmsPhoneNo" type="text" pattern="\d{9}" maxlength="9" required>
            </label>
            <small class="error"></small>
        </div>
        <button type="submit">Send</button>
    </form>

    <a class="close-reveal-modal">&#215;</a>
</div>

$（'#sendSms form'）。on（'valid.fndtn.append'，function（）{
$（“#发送短信按钮”）。禁用（true）；
$.post（app.dir+'/sms'，$（'#sendSms form'）.serialize（），函数（数据）{
$（“#发送短信按钮”）。禁用（false）；
},
'json'//我需要一个json响应
);
});
发送短信
身体需要
不需要电话
邮寄
×

您可以通过收听

valid

事件而不是

valid.fndtn.before

事件来解决此问题

我有一个关于解释这个问题的原因的评论，但这是副本

我相信这个问题是因为名称空间的工作方式造成的。基本上，触发

valid

事件将触发任何侦听

valid.

事件的侦听器

因为基金会不赞成<代码>有效< /COD>事件，并移动到<代码>有效.fnttn。遵守事件，代码的当前版本在验证期间触发这两个版本，但由于jQuery事件的方式工作，

valid.fndtn.before

的侦听器将为

valid

和

valid.fndtn.before

事件触发，并且由于两个事件都触发，侦听器运行了两次，每个事件都运行了两次

---

显而易见的解决方案是在验证过程中简单地触发旧事件，我实际上已经准备了一个带有此修复程序的PR，但我不确定开发人员的意图是什么，因为我注意到他们在其他地方也触发了两个版本的事件。

如Github问题页面上所述，使用此快速修复程序

$('form').on('valid.fndtn.abide', function(e) {
    // Fix for valid event firing twice
    if(e.namespace != 'abide.fndtn')  return;

    // The rest of your form handling code here...

---

我知道此时你已经解决了你的问题，但让我来分享一下我所做的。 一年前我和你有同样的问题，我试过：

$(document).on('valid.fndtn.abide','.myForm', Foundation.utils.debounce(function(e) {// Handle Click //ajax function here console.log('I am not fired twice'); //clear all fields for re-validation after successful submission }, 1000, true)); $（文件）。（有效，fnttn.Nelt'，'MyFrase'，Field.UTI.DeBung（函数）{//Houter点击” //这里的ajax函数 log（“我没有被解雇两次”）； //成功提交后清除所有字段以重新验证 }，1000，对）；

---

我用的是基础6，但原理是5.5的相同！ 我认为问题在于，“valid.fndtn.before”会为表单中的每个已验证输入激发

我所做的是添加到“Foundation.append.prototype.validateForm”函数中，以发出一个新的触发器“validform.fndtn.append”，该触发器在整个表单验证时发出

然后，我观察这个新触发器，并在这个新触发器触发时运行ajax调用：

window.onload = function() {


  // Overwrite Foundation Abide validateForm to emit a trigger 'validform.fndtn.abide' when the form validates
  Foundation.Abide.prototype.validateForm = function($form) {
    var self = this,
        inputs = $form.find('input'),
        inputCount = $form.find('input').length,
        counter = 0;

    while (counter < inputCount) {
      self.validateInput($(inputs[counter]), $form);
      counter++;
    }

    // what are all the things that can go wrong with a form?
    if ($form.find('.form-error.is-visible').length || $form.find('.is-invalid-label').length) {
      $form.find('[data-abide-error]').css('display', 'block');
      $form.trigger('invalidform.fndtn.abide', $form); // <== Added trigger
    }
    else {
      $form.find('[data-abide-error]').css('display', 'none');
      $form.trigger('validform.fndtn.abide', $form); // <== Added trigger
    }
  }


  // Listen for 'validform.fndtn.abide'
  $('#diventare_cliente_form').on('validform.fndtn.abide', function(e) { 

      var formdata =  $(this).serialize();

      $.ajax({
        url: '/backend/email_handler.php',
        data: formdata,
        dataType: 'json',
        cache: false,
        type: "post"
      })
      .done(function(json) {
        // do something
      })
      .fail(function() {
        // do something
      })

  });

};

window.onload=function（）{
//覆写基金会遵守验证窗体以发出一个触发器“验证表单，fnttn.Nelp'”，当表单生效时
Fortual.AbID.Type .ValueTyrForm =函数（$表单）{
var self=这个，
输入=$form.find（'input'），
inputCount=$form.find（'input'）。长度，
计数器=0；
while（计数器<输入计数）{
self.validateInput（$（输入[计数器]，$表单）；
计数器++；
}
//表单可能出现的所有问题是什么？
if（$form.find（'.form error.is visible'）.length | |$form.find（'.is invalid label'）.length）{
$form.find（'[data-commend-error]'）.css（'display'，'block'）；
$form.trigger（'invalidform.fndtn.before'，$form）//