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 :)