parsley.js с ошибками, выбранными в jquery. Класс не применяется - PullRequest
Новая
       27

parsley.js с ошибками, выбранными в jquery. Класс не применяется

0 голосов
/ 24 июня 2019

Я изо всех сил пытаюсь понять, почему parsley.js не добавит определенный мной errorClass к полям, улучшенным с помощью selected (https://harvesthq.github.io/chosen/)

Я создал эту скрипку , которая показывает мою проблему. Существует 2 идентичных списка выбора - один расширенный с выбранным, а другой стандартный.

Когда вы нажимаете кнопку отправки, оба поля проверяются, но только для стандартного выбора класс «has-error» применяется к его родительской «входной группе» div.

Есть идеи? Я бы хотел, чтобы эти два замечательных плагина играли вместе.

Код следует: 

<form id="myForm">
<div class="input-group">
    <select class="select" name="a[]" multiple="multiple" data-parsley-required data-parsley-mincheck="2">
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
    </select>
</div>

<div class="input-group">
    <select name="b[]" multiple="multiple" data-parsley-required data-parsley-mincheck="2">
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
    </select>
</div>
    <input type="submit" />
</form>

$(document).ready(function() {
    window.ParsleyConfig = {
        errorClass: 'has-error',
        successClass: 'has-success',
        classHandler: function(ParsleyField) {
            return ParsleyField.$element.parents('.input-group');
        },
        errorsContainer: function(ParsleyField) {
            return ParsleyField.$element.parents('.input-group');
        },
        errorsWrapper: '<span class="error-block">',
        errorTemplate: '<div></div>'
    };

    $(".select").chosen();

    $("#myForm").parsley();

    $("#myForm").on('submit', function(e) {
        var f = $(this);
        f.parsley().validate();

        if (f.parsley().isValid()) {
            alert('The form is valid');
        } else {
            alert('There are validation errors');
        }

        e.preventDefault();
    });
});

.has-error {
  background-color: #ff0000;
}

1 Ответ

0 голосов
/ 25 июня 2019

хорошо, решение было простым!

Изменение заключается в возврате из classHandler и errorsContainer - используйте parent (единственное число) вместо parent (множественное число)

измените конфигурацию js на.... 

window.ParsleyConfig = {
    errorClass: 'has-error',
    successClass: 'has-success',
    classHandler: function(ParsleyField) {
        return ParsleyField.$element.parent('.input-group');
    },
    errorsContainer: function(ParsleyField) {
        return ParsleyField.$element.parent('.input-group');
    },
    errorsWrapper: '<span class="error-block">',
    errorTemplate: '<div></div>'
};
...