Parsley.js: CSS Cheat Sheet

Default classes & templates

Auto added on each form item that has Parsley validation:

.parsley-validated

Auto added on each form item that has successfully passed validation:

.parsley-success

Auto added on each form item that did not pass Parsley validation:

.parsley-error

Auto added after each form item that did not pass Parsley validation. Container for errors <li>:

ul.parsley-error-list

Message displayed if constraint failed validation:

li.parsley-erro

Override 

Change class names:

$('#form').parsley({ successClass: 'my-class-name', errorClass: 'still-my-class-name' });

Change class handler. Add parsley-success and parsley-error to direct parent:

$('#form').parsley( {
    errors: {
        classHandler: function ( elem, isRadioOrCheckbox ) {
            return $( elem ).parent();
        }
    }
} );

Change error container. For example, to have the error messages appear before the field with the error in a div with the class .parsley-container:

errors: {
    container: function (element, isRadioOrCheckbox) {
        var $container = element.parent().find(".parsley-container");
        if ($container.length === 0) {
            $container = $("<div class='parsley-container'></div>").insertBefore(element);
        }
        return $container;
    }
}

Advanced changes:

See errorsWrappererrorElem error properties in Parsley default options.

Leave a Reply

Your email address will not be published. Required fields are marked *