遵守基础-触发valid.fndtn.abide
遵守基础-触发valid.fndtn.abide
提问于 2017-04-13 23:13:56
我正在使用fine对一个表单运行验证，它工作得很好。但是，如果表单是有效的还是无效的，我就很难执行操作。
HTML：
<form role="form" id="form_search_extended" name="form_search_extended" data-abide="ajax" novalidate>
<input name="postalCode" type="text" value="{{$data['postalCode']['value']}}" placeholder="ZIP/Postal Code" required maxlength="10">
<button type="submit" value="Submit">Submit</button>
</form>Javascript：
$('#form_search_extended')
.on('invalid.fndtn.abide', function () {
callFunctionOnValid();
console.log('invalid!');
})
.on('valid.fndtn.abide', function () {
console.log('valid!');
});
var form = document.getElementById('form_search_extended');
form.onsubmit = function(e) {
e.preventDefault();
console.log('form submitted');
};未运行有效或无效侦听器中的代码。
我不明白为什么这不管用。valid.fndtn.abide的事件侦听器是否未触发？因为字段的验证显示出来了，所以Abide才起作用。
谢谢。
回答 2
Stack Overflow用户
发布于 2017-04-26 14:36:27
您需要初始化脚本。
添加
<script>
$(document).foundation();
</script>在结束body标记之前
$('#form_search_extended')
.on('valid.fndtn.abide', function(e, el) {
callFunctionOnValid();
console.log('invalid!');
})
.on('invalid.fndtn.abide', function(e, el) {
console.log(e.target, 'valid!');
})
.on("submit", function(ev) {
ev.preventDefault();
console.log("Submitted");
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form data-abide novalidate role="form" id="form_search_extended" name="form_search_extended">
<label>Number required
<input name="postalCode" type="text" placeholder="ZIP/Postal Code" required pattern="number" maxlength="10">
</label>
<small class="error">You need a number.</small>
<button type="submit" value="Submit">Submit</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/plugins/foundation.abide.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Stack Overflow用户
发布于 2019-12-02 05:24:38
对于其他有这个问题的人，Lea Fox的答案对我不起作用，因为我已经初始化了Foundation。真正起作用的是在form JS代码之前创建一个新的Abide实例。在这种情况下：
const $form = $('#form_search_extended');
// Create new Abide instance
new Foundation.Abide($form);
$form
.on('valid.fndtn.abide', function(e, el) {
callFunctionOnValid();
console.log('invalid!');
})
.on('invalid.fndtn.abide', function(e, el) {
console.log(e.target, 'valid!');
})
.on("submit", function(ev) {
ev.preventDefault();
console.log("Submitted");
});现在正在调用valid.fndtn.abide和invalid.fndtn.abide触发器。我不确定为什么需要这样做，它可能与ES6模块有关。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43395985
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号