Parsley 2使用Bootstrap 4

Question

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

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

Answer 1

为了正确使用荷兰芹设置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，以确保输入字段被适当地呈现。