Asynchronous form submission with parsley.js

jquery, parsley.js

Solution

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

Problem

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.

Original source