JQuery填坑系列(二):动态添加表单校验失效问题

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JQuery填坑系列(二):动态添加表单校验失效问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

表单验证用的jquery validation插件,还用到了下拉列表相关的插件”selectize”。有这样一个功能,表单中一个下拉列表A的”required”属性是根据另一个下拉列表B的选择内容来动态变换的。于是想着根据B被选中的值来添加或者删除A的”required”属性,好像是实现了这一个功能。没想到,这其中暗暗地隐藏着一个个坑o(╥﹏╥)o。

首先呢,往A中用attr(“required”,true)方法添加必选校验,点击提交按钮的时候,A的校验并没有生效,检查了浏览器内的页面HTML代码,发现是有这个属性的,怎么肥四呢?做了一通research,原来form表单的校验规则是在页面加载完成时就已经创建好了,并且不会实时监听表单元素属性变化来动态更改的。于是看了一下jquery validation插件的官方文档,它提供了两种方法,可以在表单元素上添加,删除校验规则。如下↓

JQuery填坑系列(二):动态添加表单校验失效问题

(如果小伙伴们碰到了和我一样的问题,可以试着用上面的代码,毕竟是插件自带的方法,绝对有效)

好了,动态添加校验规则的问题解决了,又一个问题来了(摔!)用”selectize”插件给下拉列表A做配置,比如禁止添加下拉选项,添加placeholder等,发现它会影响动态添加的“required”属性,导致校验失败。想着用原生的HTML和JS代码来实现”selectize”插件配置的功能,但又和目前系统的展示效果不是很一致……本人小白,目前还没有解决这一问题,如果你有解决方案,欢迎评论区留言哈~~

脚本宝典总结

以上是脚本宝典为你收集整理的JQuery填坑系列(二):动态添加表单校验失效问题全部内容,希望文章能够帮你解决JQuery填坑系列(二):动态添加表单校验失效问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: