7

我正在为我的网站使用 zurb 基础。它已经得到了自己的验证。这是文档的链接。

我正在使用以下代码来验证和提交我的表单数据。

$('#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

    });

这会阻止默认提交，但会插入两次数据。

4

5 回答 5

12

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

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

稍加修改，该代码就可以工作：

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

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

- 更新 -

适用于 Foundation 4 的原始问题。Foundation 5+ 似乎更好地处理了这种情况：

“要自己处理提交事件，请在表单标签内 使用data-abide="ajax"而不是data-abide 。”

<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，所以不知道这个更新。

于 2013-08-26T15:05:39.653 回答
3

You can use g.stopPropagation() along with g.preventDefault(). It might help you fixing you rissue.

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

    //ajax call to insert the data

});
于 2013-08-10T09:59:18.457 回答
2

我发现这种方法更干净：

$('#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({
            // ...
        });
    }
});
于 2013-12-16T12:32:38.373 回答
1

对于基础 5，在使用带有 ajax 调用的 data-abide 时尝试此操作，不要担心 preventDefault(); ，只需使用下面的 data-abide="ajax"

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

于 2014-09-26T12:04:43.473 回答
1

打开foundation.abide.js文件

转到验证方法/功能

然后在它的最后一行，改变“return true;” “返回错误”；

于 2013-08-20T20:49:53.983 回答