javascript - formvalidation.io 和触发器插件上的阈值选项存在问题
问题描述
我对触发器插件的阈值选项有疑问...基本上我有很大的表单要验证,并且只想在一个或两个字段上使用此触发器阈值选项。我的问题是,似乎使用此阈值选项删除了其他字段上的事件侦听器。
例如:
<!doctype html>
<html lang="en">
<head>
<title>FormValidation example - Trigger plugin</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css">
<!-- Replace with your path -->
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css">
</head>
<body>
<form id="demoForm" method="POST">
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Title</div>
<div class="fl w-30">
<input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="title" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Summary</div>
<div class="fl w-75">
<textarea rows="5" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="summary"></textarea>
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Description</div>
<div class="fl w-75">
<textarea rows="5" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="description"></textarea>
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2"></div>
<div class="fl w-50">
<button type="submit" class="ba b--black-20 bg-blue white ph3 pv2 br2">Submit</button>
</div>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<!-- Replace with your path -->
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendors/formvalidation/dist/js/plugins/Tachyons.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
},
summary: {
validators: {
notEmpty: {
message: 'The summary is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
}
}
},
},
plugins: {
tachyons: new FormValidation.plugins.Tachyons(),
submitButton: new FormValidation.plugins.SubmitButton(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
trigger: new FormValidation.plugins.Trigger({
threshold: {
title: 5
}
}),
},
}
);
});
</script>
</body>
</html>
在这里,我可以看到阈值在标题字段上运行良好,但验证不再在其他两个字段上更新......
我错过了什么?
解决方案
推荐阅读
- .net - 通过 nginx 前端和 api 托管两个应用程序
- jdbc - Kafka Connect JdbcSourceConnector ExtractField 在字符串周围留下双引号
- excel - 使用 VBA 单击按钮元素
- c# - 从 Visual Studio 2019 .NET Web 应用程序中的构建操作中排除文件夹
- ruby-on-rails - 在 ActionController::Parameters 上调用 assert_valid_keys 适用于 Rails 5.0 但不适用于 5.1?
- javascript - 为 pdf 文档选择“嵌入”中的文本
- sql - 连接两个表,但仅在多列匹配时才提取值
- node.js - 如何在 socket.io 中创建一个新会话
- node.js - 无法在 Passport JS 中访问 req.user 的对象属性
- sql - 忽略其他列的重复数据删除行