Getting Parsley 2.x working with Bootstrap 3 correctly

Getting Parsley 2.x working with Bootstrap 3 correctly

I am using Twitter Bootstrap 3.1.1 with Parsley v2.0.0-rc3. I made it mostly work apart from classHandler option.
I have HTML like this:


And run Parsley like this:
$(“#register_form”).parsley({
successClass: “has-success”,
errorClass: “has-error”,
classHandler: function(el) {
return $(el).closest(“.form-group”);
},
errorsWrapper: ““,
errorTemplate: “
});

Everything works fine, but success / error classes are applied to wrong element. After the page is loaded, I get this:



And when validated, the result is this:




This value is required.

However, I expect something different:




This value is required.

I have verified using alert that the function runs. But I am new to jQuery and JavaScript, so I do not know how to debug it any further and fix it.

Solutions/Answers:

Solution 1:

You should try:

classHandler: function(el) {
    return el.$element.closest(".form-group");
}

The el is an object from parsley (I have seen it using chrome dev console) and he has a $element field with the JQuery element 🙂

Related:  Symfony2 and Twitter Bootstrap

Solution 2:

Full code working:

$("#register_form").parsley({
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function(e) {
        return e.$element.closest('.form-group');
    },
    errorsWrapper: "<span class='help-block'></span>",
    errorTemplate: "<span></span>"
});

References