我正在为我的网站使用 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
});
这会阻止默认提交，但会插入两次数据。
【问题讨论】：
标签： jquery validation zurb-foundation
对于基础 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
【讨论】：
正如我对另一个答案的评论所述：
这不会阻止“invalid”事件执行 AJAX，因为“valid”和“invalid”都是由“submit”触发的。结果就是上面的函数被“提交”调用了，即使表单无效，也会进行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，所以不知道这个更新。
【讨论】：
g.type === "submit"？乍一看，这与无效表单仍然可以发送 AJAX 提交的其他答案相同（因为“提交”不一定是“有效”。您能澄清一下为什么要测试“提交”而不是“有效”吗？ “？
我觉得这种方法更简洁：
$('#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({
// ...
});
}
});
【讨论】：
打开foundation.abide.js文件
转到验证方法/函数
然后在它的最后一行，更改“return true;”为“返回假”；
【讨论】：
您可以将 g.stopPropagation() 与 g.preventDefault() 一起使用。它可能会帮助您解决问题。
$('#myForm').on('valid submit', function (g) {
g.stopPropagation();
g.preventDefault();
//ajax call to insert the data
});
【讨论】：