关于 jquery：使用 parsley.js 进行异步表单提交

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
$(‘#sendData’).click(function(e) {
//check if valid with parsley
var valid = $(‘#contactForm’).parsley ( ‘validate’ );
if ( valid === false )
{
e.preventDefault();
}
else
{
$.post("contactForm.php", $("#contactForm").serialize());
}
});
});

下面的正确解决方案。

你的代码应该是这样的。

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’) ) {
// …
}

这对我有用：

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function() {
$(‘#signupform’).parsley().subscribe(‘parsley:form:validate’, function (formInstance) {
formInstance.submitEvent.preventDefault(); //stops normal form submit
if (formInstance.isValid() == true) { // check if form valid or not
//code for ajax event here
$.post("createuser.php", $(#signupform).serialize());
}});
});

是的，它是从 parsleyjs.org 示例中复制的。但是效果很好！

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268753.html

关于 jquery：使用 parsley.js 进行异步表单提交

Asynchronous form submission with parsley.js

相关推荐

发表回复