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，以確保輸入字段被適當地呈現。