Question

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

Answer 1

您可以通过收听valid事件而不是valid.fndtn.abide事件来解决此问题。

我对project's github issue page的评论解释了这个问题的原因，但这是副本。

我认为这个问题是因为jQuery's event命名空间的工作原因。基本上，触发valid事件会触发任何听取valid.*事件的听众。

由于Foundation正在弃用valid事件并转移到valid.fndtn.abide事件，因此当前版本的代码会在验证期间触发，但由于jQuery事件的工作方式，监听器for valid.fndtn.abide将触发valid和valid.fndtn.abide事件，并且由于两个事件都被触发，因此侦听器会运行两次，每次都发生两次事件。

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

Answer 2

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

Answer 3

我知道这个时候你已经解决了你的问题，但让我分享一下我的所作所为。一年前我和你的问题一样，我试过这个问题：

$(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));

Answer 4

我正在使用Foundation 6但是5.5的原则应该是相同的！

我认为问题是“有效 .fndtn.abide”会触发表单中每个经过验证的输入。

我所做的是添加到“Foundation.Abide.prototype.validateForm”函数中，以便在整个表单验证时发出新的触发器“ validform .fndtn.abide”。 / p>

然后我看到这个新触发器并在这个新触发器触发时运行我的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
      })

  });

};

希望这对某人有所帮助，因为我吹了一整天尝试各种解决方案，这是我发现的最干净的。也许我在这里遗漏了关于Abide和Ajax调用的一些内容，但基金会团队没有提供一种方法来捕捉整个表单的确认，这似乎很奇怪！

基金会遵守5.5 ajax提交重复

4 个答案: