Asynchronous form submission with parsley.js
我正在尝试创建一个使用 Parsley.js 进行前端验证并异步提交的表单。该表单名为#contactForm，提交按钮为#sendData，当我在空或无效表单上点击提交时出现错误。我希望看到来自无效表单数据的”错误”警报，但它只是继续出现 Else 条件，并且数据由 contactForm.php.
处理
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function() {
// submit data on click and check if valid |
下面的正确解决方案。
- 如果验证结果为布尔值，则您的条件应为 if (!valid) 或 if (valid === false)。此外，请考虑将参数 e 添加到单击处理程序并执行 e.preventDefault(); 而不是返回 false 以取消事件。
- 他们还在他们的网站上声明您必须从表单中删除 data-validate=”parsley” 属性以覆盖默认处理。
- 感谢@plalx 的建议，我已经从表单属性中删除了 data-validate=”parsley” 并更正了布尔值的条件。出于某种原因，我仍然有同样的问题。啊——忘了我。我误读了您的评论并已解决。再次感谢。
你的代码应该是这样的。
|
1
2 3 4 5 6 7 8 |
$(function() {
$(‘#contactForm’).submit(function(e) { e.preventDefault(); if ( $(this).parsley().isValid() ) { $.post(“contactForm.php”, $(this).serialize()); } }); }); |
- 您想捕捉表单提交事件，而不是点击提交按钮。 (还有其他提交表单的方法——比如按 Enter 键——不会触发点击，但也必须处理。)
- 您总是希望阻止默认操作。您通过 Ajax 提交表单，因此您实际上永远不想以传统方式提交它。
- 无需显式与 === false 进行比较。 (当表单有效时，Parsley 将返回一个真实值，只需使用它。)
- $(document).ready(function() { … 是 $(function() { …。
- 确定一种放置花括号的方法。 (JS 中最常见的约定是”不对称”，即 { 在语句开始的那一行。)
- 你的评论是多余的。 (他们准确地说出代码所说的内容，因此不需要它们。)
编辑：在旧版本的 parsely(2.x 之前)中，使用
|
1
2 3 |
if ( $(this).parsley(‘validate’) ) {
// … } |
- 不幸的是 parsley(\\’validate\\’) 在 parsley 2.x 中不可用
- 在 Parsley 2.x 中，您应该使用 $(this).parsley().isValid() 而不是 $(this).parsley(‘validate’)。其余的都是正确的。
- 我一直在寻找这个解决方案。只需一条条件即可解决所有问题。谢谢托马拉克！
这对我有用：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 |
<form id=”signupform” data-parsley-validate>
(….) </form>
$(function() { |
是的，它是从 parsleyjs.org 示例中复制的。但是效果很好！
来源：https://www.codenong.com/15737455/
