使用parsley.js提交异步表单

时间:2013-04-01 04:02:38

标签: jquery parsley.js

我正在尝试使用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());       
        }
    });
}); 

以下正确的解决方案。

2 个答案:

答案 0 :(得分:40)

以下是您的代码的外观。

$(function() { 
    $('#contactForm').submit(function(e) { 
        e.preventDefault();
        if ( $(this).parsley().isValid() ) {
            $.post("contactForm.php", $(this).serialize());       
        }
    });
}); 
  • 您想要捕获表单提交事件,而不是单击提交按钮。 (还有其他提交表单的方式 - 比如按Enter键 - 不会触发点击,但也必须处理。)
  • 您始终希望阻止默认操作。您通过Ajax提交表单,因此您实际上从不想以传统方式提交表单。
  • 无需明确地与=== false进行比较。 (当表格有效时,欧芹将返回一个真值,只需使用它。)
  • $(document).ready(function() { ...$(function() { ...
  • 安排一种放置花括号的方法。 (JS中最常见的约定是“非对称”,即启动语句的一行上的{。)
  • 您的评论是多余的。 (他们确切地说出代码所说的内容,因此不需要它们。)

编辑:在旧版本的parsely(2.x之前)中,使用

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

答案 1 :(得分:3)

这对我有用:

<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示例中复制的。但它工作正常!