让 Parsley 2 与 Bootstrap 4 一起工作答案

【问题标题】：Getting Parsley 2 working with Bootstrap 4让 Parsley 2 与 Bootstrap 4 一起工作
【发布时间】：2016-05-16 16:55:44
【问题描述】：

默认情况下，Parsley 只处理更新单个元素的类（通常是无效条目所在的输入字段）。但是，在 Bootstrap 4 中，我们必须同时更新表单组和输入字段类以使用验证图标呈现它们。否则，仅更改边框颜色。

在客户端验证用户输入时，如何使用 Parsley 正确、完整地设置输入字段的样式？

【问题讨论】：

标签： parsley.js twitter-bootstrap-4

【解决方案1】：

为了使用 Parsley 正确设置 Bootstrap 4 的样式，您必须修改 div.form-group 围绕您的 input 字段的类（假设您想要验证图标，就像我一样）。

根据文档，您需要将.has-success 或.has-danger 添加到div.form-group，然后在输入字段中分别指定form-control-success 和form-control-danger。

然而，Parsley 默认只支持更新单个元素的类。幸运的是，它支持事件绑定，因此在您的 parsley.js 文件末尾添加了一个小函数，我们可以在用户修复验证错误时处理更新 div.form-group 样式。

首先配置Parsley：

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

这些是应用于输入字段的正确类，Parsley 默认使用这些类。接下来，将以下内容附加到 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');
    }
});

上面将监听字段何时被验证，因此根据 Bootstrap 4 文档更新相关的div.form-group 以确保输入字段得到正确呈现。

【讨论】：