Получение Parsley 2, работающего с Bootstrap 4

Question

По умолчанию Parsley обрабатывает только класс одного элемента (обычно это поле ввода, в котором находится недопустимая запись). Однако с помощью Bootstrap 4 мы должны обновить классы форм-групп и классов ввода, чтобы отобразить их с помощью значков проверки. В противном случае изменяется только цвет рамки.

Как я могу использовать Петрушку правильно, полностью стилизовать свои поля ввода при проверке ввода пользователя в клиенте?

Answer 1

Чтобы правильно создать Bootstrap 4 с помощью Parsley, вы должны изменить классы div.form-group, окружающие поля input (при условии, что вы хотите значки проверки, как и я).

Согласно документации, вам необходимо добавить .has-success или .has-danger к div.form-group, а затем указать form-control-success и form-control-danger соответственно с полями ввода.

Однако Parsley поддерживает обновление класса по одному элементу по умолчанию. К счастью, он поддерживает привязку событий, поэтому с небольшой добавленной функцией в конец вашего файла parsley.js мы можем обработать обновление стилей div.form-group, когда пользователь исправил ошибку проверки.

Сначала настройте Петрушка:

errorClass: "form-control-danger", 
successClass: "form-control-success" 

Это правильные классы относятся к полям ввода, которые Петрушка работает по умолчанию. Затем добавьте следующее в файл parsley.(min).js.

window.Parsley.on('field:validated', function(e) { 
    if (e.validationResult.constructor!==Array) { 
     this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success'); 
    } else { 
     this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger'); 
    } 
}); 

выше будет слушать, когда поля были проверены, и, следовательно, обновить соответствующую div.form-group в соответствии с документацией Bootstrap 4 для того, чтобы поле ввода визуализируется соответствующим образом.