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.

Answer 1

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') ) {
    // ...
}

Answer 2

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!