关于JQuery validate表单校验插件对级联下拉框的校验问题

简介: 关于JQuery validate表单校验插件对级联下拉框的校验问题

今天在使用JQuery validate表单校验插件时,遇见了一个非常诡异的问题了。在此记录一下:


         问题描述:

22.jpg

                 


                如上图所示,行部类别和所属行部2项,存在级联关系,根据用户选择的不同行部类别显示不同的所属行部。


                第一次选择营业部时,会对所选择的所属行部正确进行校验。选择“河南支行”,出现校验不通过标识。


                当改变行部类别时,会重置所属行部,


                第二次行部类别选择网点时,所属行部再次选择“河南支行”,也出现了校验不通过标识。注意:正常情况是能够通过校验的。


                         通过使用fire bug查看校验请求发现,当第二次再次选择所属行部时,由于选择了和上次一样的值(“河南支行”),并没有再次发送校验请求,就直接重现了上次校验的结果。


                原因分析:


                          导致这样的结果,主要是由于JQuery validate表单校验插件对下拉框重新选定的值如果和上一次的值一样,就不会触发校验方法,不会根源remote向后台发送校验请求。而是直接还原上次校验的结果。


                        不能说这样的机制不好,它减少了不必要的网络校验的请求,减轻了服务器的压力。那么在针对这种特殊的下拉框级联校验我们该怎么解决呢?


               解决方案:


                      根据上面的分析,我们只要能去掉所属机构下拉框对于上次选择结果的记忆就可以了。 当行部类别改变导致所属机构重置时,加上如下这段代码:


if($.data(document.getElementById("supBdt"), "previousValue"))
               {
               $.data(document.getElementById("supBdt"), "previousValue").old = null; 
         }

                        其中,supBdt是所属机构下拉框的id。


                      这样就能完美解决这个问题了。

目录
相关文章
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
388 0
|
JavaScript 前端开发
将jquery validate校验框架的remote异步验证设置为同步校验
将jquery validate校验框架的remote异步验证设置为同步校验
545 0
将jquery validate校验框架的remote异步验证设置为同步校验
|
JavaScript 前端开发 数据安全/隐私保护
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.
2199 0
|
JavaScript
jquery validate验证方法
实例:         equalTo方法  equalTo(其他)返回:布尔 说明:要求元素与另一个元素相同 等于(其他) 其他 类型:选择器 元素的选择器用于比较当前值 例子: 使“字段”必须与#other相同 1 2 3 4 五 6 7 8...
1381 0