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.

Tiana

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. – Transsonic

They also state on their site that you must remove the data-validate="parsley" attribute from the form to override the default processing. – Transsonic

Thanks for the advice @Transsonic 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. – Tiana

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

Ebonieebonite

Unfortunately parsley('validate') is not available in parsley 2.x – Ruck

In Parsley 2.x you should use $(this).parsley().isValid() instead of $(this).parsley('validate'). All the rest remains correct. – Heddie

I've been searching for this solution. Just one line of condition fix it all. Thanks Tomalak! – Eec

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!

Apophthegm