0

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

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

4

1 回答 1

4

为了使用 Parsley 正确设置 Bootstrap 4 的样式,您必须修改字段div.form-group周围的类input(假设您想要验证图标,就像我做的那样)。

根据您需要添加.has-success.has-danger的文档div.form-group,然后分别指定form-control-successform-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');
    }
});

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

于 2016-05-16T16:55:44.177 回答