使用 parsley.js 异步提交表单答案

【问题标题】：Asynchronous form submission with parsley.js使用 parsley.js 异步提交表单
【发布时间】：2013-03-22 04:10:28
【问题描述】：

我正在尝试创建一个使用 Parsley.js 进行前端验证并异步提交的表单。该表单名为#contactForm，提交按钮为#sendData，当我在空或无效表单上点击提交时出现错误。我希望看到来自无效表单数据的“错误”警报，但它只是继续出现 Else 条件，并且数据由 contactForm.php 处理。

$(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());       
        }
    });
});

下面的正确解决方案。

【问题讨论】：

如果验证结果是布尔值，你的条件应该是if (!valid)或者if (valid === false)。此外，请考虑将参数 e 添加到您的点击处理程序并执行 e.preventDefault(); 而不是返回 false 以取消事件。
他们还在their site 上声明您必须从表单中删除data-validate="parsley" 属性以覆盖默认处理。
感谢@plalx 的建议我已经从表单属性中删除了 data-validate="parsley" 并更正了布尔值的条件。出于某种原因，我仍然有同样的问题。啊——忘了我。我误读了您的评论并已解决。再次感谢。

标签： jquery parsley.js

【解决方案1】：

你的代码应该是这样的。

$(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 中最常见的约定是“不对称”，即{ 在语句开始的那一行。）
你的 cmets 是多余的。（他们说的正是代码所说的内容，因此不需要它们。）

编辑：在旧版本的 parsely（2.x 之前）中，使用

if ( $(this).parsley('validate') ) {
    // ...
}

【讨论】：

不幸的是 parsley('validate') 在 parsley 2.x 中不可用
在 Parsley 2.x 中，您应该使用 $(this).parsley().isValid() 而不是 $(this).parsley('validate')。其余的都是正确的。
我一直在寻找这个解决方案。只需一条条件即可解决所有问题。谢谢托马拉克！

【解决方案2】：

这对我有用：

<form id="signupform" data-parsley-validate>
    (....)
</form>

<script>
$(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());
    }});
});
</script>

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

【讨论】：