parsley.js form validation - confirm when no errors found on form submission

Question

I have read the parsley.js docs but I am still learning JQuery so it goes in one ear and out the other.

I think I need to add a custom event listener to achieve what I need, but I am really not sure, so some help would be appreciated.

I have a form with parsley.js embedded. The form works as expected but I have to add some functionality to the form.

How would I display an alert message (alert('no client side errors!');) to the user when all the client side errors have been cleared or when there are no client side errors when the form is submitted?

Here is an example of my form code:

<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>

    <div id="row_id_name_details_first_name" class="control-group">
        <label for="id_name_details_first_name" class="control-label required">First Names:</label>
        <div class="controls">
            <input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>  
        </div>
    </div>

    <div id="row_id_name_details_middle_name" class="control-group">
        <label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
        <div class="controls">
            <input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span> 
        </div>
    </div>

    <div id="row_id_name_details_last_name" class="control-group  ">
        <label for="id_name_details_last_name" class="control-label required">Last Names:</label>
        <div class="controls">
            <input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
        </div>
    </div>

    <hr />

    <input class="btn-u btn-u-blue" type="submit" value="Add">

</form>

<script>
    ....
</script>

Answer 1

This code shows the alert message when the form is submitted and the all fields are valid.

<script>
    $(document).ready(function() {
        // bind parsley to the form
        $("#name_details_form").parsley();

        // on form submit
        $("#name_details_form").on('submit', function(event) {
            // validate form with parsley.
            $(this).parsley().validate();

            // if this form is valid
            if ($(this).parsley().isValid()) {
                // show alert message
                alert('no client side errors!');
            }

            // prevent default so the form doesn't submit. We can return true and
            // the form will be submited or proceed with a ajax request.
            event.preventDefault();
        });
    });
</script>