Question

我在我的网站上使用zurb基金会。它已经得到了自己的验证。这是文档的a link。

我使用以下代码验证并提交表单数据。

$('#myForm').on('valid', function (g) {
g.preventDefault();

//ajax call to insert the data

});

我的问题是，我无法使用preventDefault()阻止此表单的默认提交。

任何想法怎么做？

我试过这样做。

 $('#myForm').on('valid submit', function (g) {
    g.preventDefault();

    //ajax call to insert the data

    });

这可以防止默认提交，但会将数据插入两次。

Answer 1

正如我在另一个答案的评论中所述：

这不会阻止“无效”事件执行AJAX，因为“有效”和“无效”都由“提交”触发。结果是上面的函数被“submit”调用，即使表单无效，也会调用AJAX。

通过一些小修改，该代码可以正常工作：

$("#myForm").on("valid invalid submit", function(g){
  g.stopPropagation();
  g.preventDefault();
  if (g.type === "valid"){
    // AJAX call
  }
});

这是围绕Abide验证事件的一种hacky方式，但它对我有用，直到库为这种情况提供更好的处理。

<强> - UPDATE -

原始问题适用于基金会4.看起来基金会5+更好地处理这种情况：

“要自行处理提交事件，请在表单标记内使用 data-abide =”ajax“，而不是数据持久。”

<form data-abide="ajax">
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" name="users_name" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <button type="submit">Submit</button>
</form>

$('input[name="users_name"]').on('valid', function() {
  // Handle the submission of the form
});

我从v4开始就没有使用过Abide，所以不知道这个更新。

Answer 2

您可以将g.stopPropagation（）与g.preventDefault（）一起使用。它可能会帮助你解决你的问题。

$('#myForm').on('valid submit', function (g) {
    g.stopPropagation();
    g.preventDefault();

    //ajax call to insert the data

});

Answer 3

我发现这种方法更清洁：

$('#myForm').on({
    'submit': function(){
        // will prevent browser-submitting the form in any any case:
        return false;
    },
    'valid': function(){
        // bind to abide's event and only care about submitting the stuff AJAX'ly
        $(this).ajaxSubmit({
            // ...
        });
    }
});

Answer 4

打开foundation.abide.js文件

转到验证方法/功能

然后在它的最后一行，改变“return true;” “返回虚假;”

Answer 5

对于基础5，在使用数据遵守ajax调用时尝试这一点，不要担心preventDefault（）; ，只需使用data-abide =＆＃34; ajax＆＃34;如下所示

HTML

<form data-abide="ajax" id="myform">
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" name="users_name" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <button type="submit">Submit</button>
</form>

JAVASCRIPT

$('#myForm')
  .on('invalid.fndtn.abide', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid.fndtn.abide', function () {
    console.log('valid!');
  });

简单易行参考 - http://foundation.zurb.com/docs/components/abide.html

preventDefault无法使用Zurb验证（Abide）

5 个答案: