Question

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

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

Answer 1

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

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

但是，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，以确保输入字段得到适当的呈现。

让Parsley 2使用Bootstrap 4

1 个答案: