Parsley 2使用Bootstrap 4
问题描述:
默认情况下,Parsley只处理更新单个元素的类(通常是无效条目所在的输入字段)。但是,使用Bootstrap 4,我们必须更新form-group和输入字段类,以使用验证图标来渲染它们。否则,只更改边框颜色。Parsley 2使用Bootstrap 4
在验证客户端中的用户输入时,如何使用欧芹正确,完整地设置我的输入字段的样式?
答
为了正确使用荷兰芹设置Bootstrap 4,您必须修改围绕您的input
字段的div.form-group
的类(假设您需要验证图标,就像我一样)。
根据需要添加.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');
}
});
上面会听当字段已被验证为,并且因此根据所述引导4文档更新相关div.form-group
,以确保输入字段被适当地呈现。