javascript - style - Conseguir que Parsley 2.x funcione correctamente con Bootstrap 3

tooltip html bootstrap

Question

Estoy usando Twitter Bootstrap 3.1.1 con Parsley v2.0.0-rc3 . Hice que todo funcionara aparte de la opción classHandler .

Tengo HTML como este:

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="">   
</div>

Y ejecuta el perejil así:

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

Todo funciona bien, pero las clases de éxito / error se aplican a un elemento incorrecto. Después de que se carga la página, me sale esto:

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block" id="parsley-id-5043"></span>
</div>

Y una vez validado, el resultado es este:

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control has-error" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block filled" id="parsley-id-5043">
        <span class="parsley-required">This value is required.</span>
    </span>
</div>

Sin embargo, espero algo diferente:

<div class="form-group has-error">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block filled" id="parsley-id-5043">
        <span class="parsley-required">This value is required.</span>
    </span>
</div>

He verificado usando alert que la función se ejecuta. Pero soy nuevo en jQuery y JavaScript, por lo que no sé cómo depurarlo más y solucionarlo.

Answer 1

Código completo de trabajo:

$("#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>"
});

Answer 2

Deberías intentarlo:

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

El es un objeto de perejil (lo he visto usando la consola de desarrollo chrome) y tiene un campo de $ element con el elemento JQuery :)