Display parsley errors in bootstrap tooltip

Question

I'm using parsley 2.0.0-rc5 and want display the error messages in a bootstrap tooltip. I'm using "parsley:field:error" but the event fires before the error is displayed in error-container and I can't pick up the error. Someone an idea how I get the error message for each field?

$.listen('parsley:field:error', function (e) {

    dataParsleyId = e.$element.attr('data-parsley-id');
    errorMsg = 'Error: ' + $('#parsley-id-'+dataParsleyId).text();

    e.$element.attr('data-original-title', errorMsg);
    e.$element.tooltip('show');

});

Capella

Have a similar requirement, did you figure out how to get the message? – Triaxial

figured it out! have added an answer here – Triaxial

Answer 1

Guillaume Potier, the author of parsley, has added a ParsleyUI.getErrorsMessages(parsleyFieldInstance) method that will return an array of messages errors. It is available on master branch in github and would be released in next stable version.

This works perfectly for me and this is my sample code:

window.Parsley.on('field:error', function (fieldInstance) {
    fieldInstance.$element.popover({
        trigger: 'manual',
        container: 'body',
        placement: 'right',
        content: function () {
            return fieldInstance.getErrorsMessages().join(';');
        }
    }).popover('show');
});

window.Parsley.on('field:success', function (fieldInstance) {
    fieldInstance.$element.popover('destroy');
});

Capella

Awesome, great help! How did you get the original errors in LI's to hide? – Caundra

Just answered my own question, to turn off all UI, you just set "data-parsley-ui-enabled" to false, or data-parsley-errors-messages-disabled for just leaving out the error messages – Caundra

As addition, you can always use <form data-parsley-errors-messages-disabled="true"> if you don't want to show standard error containers, but still want to get popup displayed. – Montanez

Works perfectly on bootstrap 3 – Charente