Asynchronous form submission with parsley.js

问题

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.

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

回答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!

来源：https://stackoverflow.com/questions/15737455/asynchronous-form-submission-with-parsley-js

标签

jquery

parsley.js