Parsley Form Validation - Event Listeners

Question

Ok, so i have searched everywhere for this but still can't get it working. No one seems to have tried it but i'm sure it can do it. I want to use the Parsley validation plugin with my twitter bootstrap project. I have read the docs, but am still learning JQuery so it's going right over my head (i'm rationalising that it is too advanced for me at the moment). I want to add a custom event listener to Parsley to show a popup on error instead of the ugly li's. This is what i have tried: JQUERY ``` $(document).ready(function () { $('.parsley').parsley({ successClass: 'success', errorClass: 'error', errors: { classHandler: function(el) { return $(el).closest('.form-control'); }, errorsWrapper: '

', errorElem: '

' } }); $('.test').parsley({ successClass: 'success', errorClass: 'error', errors: { classHandler: function(el) { return $(el).closest('.form-control'); }, errorElem: '

' }, onFieldValidate: function ( e…

Accepted Answer

You are doing what you shouldn't do. Looking at the Parsley docs one can see warning like this:

you must remove data-validate="parsley" auto-binding code in your forms DOM to allow you to override the default processing and use Parsley purely from javascript.

After that you can do `$('.test').parsley(...)`.

Also note that you are hanging listeners incorrectly. The right way is to put them inside `listenter: {}` property just like this:

```
$('.test').parsley({
    listeners: {
        onFieldValidate: function(elem, ParsleyField) {
            console.log("validate", elem);
            return false;
        },
        onFieldError: function(elem, constraints, ParsleyField) {
            console.log("error", elem);
        }
    }
});
```

Simple example could be found here

Parsley Form Validation - Event Listeners

Solution

Problem