JQuery填坑系列（二）：動態(tài)添加表單校驗失效問題

LeviDing 發(fā)布于2019-08-23 14:03 / 1035人閱讀

摘要：表單驗證用的插件，還用到了下拉列表相關(guān)的插件。沒想到，這其中暗暗地隱藏著一個個坑。于是看了一下插件的官方文檔，它提供了兩種方法，可以在表單元素上添加，刪除校驗規(guī)則。

表單驗證用的jquery validation插件，還用到了下拉列表相關(guān)的插件”selectize”。有這樣一個功能，表單中一個下拉列表A的”required”屬性是根據(jù)另一個下拉列表B的選擇內(nèi)容來動態(tài)變換的。于是想著根據(jù)B被選中的值來添加或者刪除A的”required”屬性，好像是實現(xiàn)了這一個功能。沒想到，這其中暗暗地隱藏著一個個坑o(╥﹏╥)o。

首先呢，往A中用attr(“required”,true)方法添加必選校驗，點擊提交按鈕的時候，A的校驗并沒有生效，檢查了瀏覽器內(nèi)的頁面HTML代碼，發(fā)現(xiàn)是有這個屬性的，怎么肥四呢？做了一通research，原來form表單的校驗規(guī)則是在頁面加載完成時就已經(jīng)創(chuàng)建好了，并且不會實時監(jiān)聽表單元素屬性變化來動態(tài)更改的。于是看了一下jquery validation插件的官方文檔，它提供了兩種方法，可以在表單元素上添加，刪除校驗規(guī)則。如下↓

（如果小伙伴們碰到了和我一樣的問題，可以試著用上面的代碼，畢竟是插件自帶的方法，絕對有效）

好了，動態(tài)添加校驗規(guī)則的問題解決了，又一個問題來了（摔！）用”selectize”插件給下拉列表A做配置，比如禁止添加下拉選項，添加placeholder等，發(fā)現(xiàn)它會影響動態(tài)添加的“required”屬性，導(dǎo)致校驗失敗。想著用原生的HTML和JS代碼來實現(xiàn)”selectize”插件配置的功能，但又和目前系統(tǒng)的展示效果不是很一致……本人小白，目前還沒有解決這一問題，如果你有解決方案，歡迎評論區(qū)留言哈~~