Asynchronous form submission with parsley.js

Question

I'm trying to create a form that is validated front end using Parsley.js and submitted asynchronously. The form is called #contactForm and the submit button is #sendData, the error comes when I hit submit on an empty or invalid form. I expect to see an 'Error' alert from invalid form data but instead it just continues with the Else condition and the data is processed by 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());       
        }
    });
});

Proper solution below.

If the validation result is boolean, your condition should be `if (!valid)` or `if (valid === false)`. Also, consider adding a parameter `e` to your click handler and do `e.preventDefault();` instead of returning `false` to cancel the event. — plalx, Apr 01 '13 at 04:31
They also state on [their site](http://parsleyjs.org/documentation.html#parsleyform) that you must remove the `data-validate="parsley"` attribute from the form to override the default processing. — plalx, Apr 01 '13 at 04:38
Thanks for the advice @plalx I have removed data-validate="parsley" from the form attributes and corrected the condition for boolean. For some reason I still have the same problem. Ah- forget me. I misread your comment and have solved it. Thanks again. — nobody, Apr 01 '13 at 04:57

Tomalak · Accepted Answer · 2015-06-09T07:20:04.647

Here's how your code should look like.

$(function() { 
    $('#contactForm').submit(function(e) { 
        e.preventDefault();
        if ( $(this).parsley().isValid() ) {
            $.post("contactForm.php", $(this).serialize());       
        }
    });
});

You want to catch the form submit event, not the click on the submit button. (There are other ways of submitting a form - like pressing Enter - that will not trigger a click but must be handled as well.)
You always want to prevent the default action. You submit your form via Ajax, so you actually never want to submit it in the traditional way.
There is no need to compare to === false explicitly. (Parsley will return a truthy value when the form is valid, just use that.)
$(document).ready(function() { ... is $(function() { ....
Settle on one way to place curly braces. (The most common convention in JS is "asymmetric", i.e. { on the one line that started the statement.)
Your comments are superfluous. (They say exactly what the code says, so they are not needed.)

EDIT: In older versions of parsely (before 2.x), use

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

Unfortunately parsley('validate') is not available in parsley 2.x — Andrew Liu, Aug 15 '14 at 01:06
In Parsley 2.x you should use `$(this).parsley().isValid()` instead of `$(this).parsley('validate')`. All the rest remains correct. — Luís Cruz, Sep 03 '14 at 12:58
I've been searching for this solution. Just one line of condition fix it all. Thanks Tomalak! — Jonas T, Jun 09 '15 at 07:15

score 3 · Answer 2 · edited Apr 23 '15 at 08:40

This is what worked for me:

<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>

Yes, it is copied from parsleyjs.org examples. But it works fine!

Asynchronous form submission with parsley.js

2 Answers2

Linked