JQuery填坑系列（二）：动态添加表单校验失效问题

LeviDing 发布于2019-08-23 14:03 / 950人阅读

摘要：表单验证用的插件，还用到了下拉列表相关的插件。没想到，这其中暗暗地隐藏着一个个坑。于是看了一下插件的官方文档，它提供了两种方法，可以在表单元素上添加，删除校验规则。

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

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

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

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

云服务器 GPU云服务器 jquery失效表单校验异步校验表单校验jquery

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100021.html

JQuery填坑系列（一）：JQuery对象与DOM对象innerHTML属性

摘要：做项目时，碰到一个需求，根据一个下拉框选项的值来动态显示另一个表单元素的标题。总结对象无法使用对象的任何方法和属性，要想获取或者设置一个标签内部的内容，可以使用的方法。做项目时，碰到一个需求，根据一个下拉框选项的值来动态显示另一个表单元素的标题。心想着做一下选项值的判断，然后用一下innerHTML这一属性，应该就可以了。然而，我还是图样图森破，用JQuery获取到相应的对象之后并且...

crelaber 2019-08-23 14:02 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0
JavaScript学习

摘要：和，前者是过滤选择器而后者是子代选择器。第三章中的操作查找节点想要查找元素节点或者是属性节点，就是通过前一章学习的选择器获取相应元素的文本，或者是通过选择器属性名获取某元素相应属性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...

J4ck_Chan 2019-08-19 17:57 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0