CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-pluginsparsley.js
The Dude
The Dude

Reputation: 311

Display parsley errors in bootstrap tooltip

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');

});

Upvotes: 6

Views: 6082

Answers (1)

The Dude
The Dude

Reputation: 311

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');
});

Upvotes: 14

Related Questions