Как правильно настроить Parsley 2.x с Bootstrap 3

Я использую Twitter Bootstrap 3.1.1 с Parsley v2.0.0-rc3. Я сделал это в основном, кроме опции classHandler.

У меня есть такой HTML:

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

И запустите Parsley следующим образом:

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

Все работает отлично, но классы успеха/ошибки применяются к неправильному элементу. После загрузки страницы я получаю следующее:

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

И при проверке результат следующий:

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

Однако я ожидаю чего-то другого:

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

Я проверил с помощью alert, что функция работает. Но я новичок в jQuery и JavaScript, поэтому я не знаю, как отлаживать его и исправлять.

Ответ 1

Вы должны попробовать:

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

el - это объект из петрушки (я видел его с помощью консоли chrome dev), и у него есть поле $element с элементом JQuery:)

Ответ 2

Работа полного кода:

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