由jQuery Validation Remote验证引起的错误(MVC3 jQuery.validate.unobtrusive)

简介:

出问题的场景:我用MVC3写了一个表单,不管怎么点击都没有反应。因为不是第一次写带validate的表单,所以我确认所有验证都是通过的。

下面是在mvc4默认模版项目中重现错误的示例表单:

image

实际项目中会相对复杂一点,表单也是ajax版本的。

image

现在不管怎么点击Register都不会有错误,也没有反应,同学可以自己下载测试包测试。

image

状态200,一点错误都没有。

这个问题困扰了我两天,没有错误信息的问题最头疼,怎么操作console里都没有任何输出。

往往最后解决问题的方案不是最宝贵的,解决的思路和过程才是,而且也学到了更多的东西,如果看解决方案请移步文章末尾;

这里说下我的经验:

1、对于常用的组件要熟悉熟练熟透,不熟悉开发速度上不来,不熟练没办法调试,不熟透会花更多时间解决问题,我停留在熟悉太久了,所以要抓住每次碰到问题的机会有针对的深入学习一下;

2、时刻保持良好的调试环境,熟悉各种调试工具,很难想象没有这些调试工具的生活;

3、熟悉Http请求,像常用的Post、Get,以及各种数据类型像常用的json、text/html等;

4、脚本语言没有秘密,所以虽然不能像编译型语言那样调试的便利,但是通过脚本的源代码什么问题都能解决;

源代码是王道

碰到这个问题第一步就是打开firebug,这里赞下ch的开发者工具,确实给力,后面的调试基本都在ch里执行的。

因为js基础不扎实,对于jquery管理下的事件还是很头大的,特别是单步后的代码跑来跑去的一点概念没有。

步骤一:先从自己的代码出手,对比两个cshtml页面代码,样本页面是没有问题的,不是不自信,一般稳定的库出错的可能性太小,大家都懂得;

结果:从第一张图应该能看的出来,没有问题,用的合情合理,因为所有引用和使用的技术都在样本页面已经使用过了,这里我注释了很多不同的东西,当然问题还是存在;

步骤二:因为对事件不熟悉,原来的理解也是皮毛,虽然跟c#也是差不多的我还是复习了一遍,《Javascript权威指南》很棒,很全也很深入,感谢淘宝前段团队;

结果:一天时间有一半用在这个上面了,当然途中有复习有搜索等,虽然没解决问题但是这块空白算是补上了,通过调试又看了不少jQuery代码,还是很看不懂啊,jQuery代码质量还是很高的很精简,很全面,内存泄露也有检查。这里要分享的是解决问题要迂回,就算最后没解决但是不会两手空空,侧面的学习更能帮助解决问题,还有就是换个问题或者工作放松下,最后回头解决可能就更清晰了;

步骤三:第二天,前一天没解决的问题,总是会留在脑子里挥之不去,趁无聊的时候从策略层面分析了总结了几种可能,以便于上班后缩小问题范围,验证的错误不是第一次碰到,虽然验证都通过了,但是觉得问题还是出在这个上面的可能性更大,整个上午都在jquery.validate.js和 jquery.validate.unobtrusive.js 这两个文件里度过。

结果:基本了解了validate的结构;

步骤四:定位到关键的地方;

结果:

image

handle()就是执行form.submit()的地方,但是它都上还有个判断,这个判断的作用是防止重复提交,去掉它试试看?嗯,可以提交了,但是问题还没有解决;

 

步骤五:validator.pendingRequest都在哪些地方有操作?为什么没有回到0,0就可以正常handle()了;

结果:validator对象的init,startRequest,stopRequest。太明显了,开始++,结束--,没变0肯定是没--,进一步调试也找到了断裂的地方,jquery.validate.js文件Remote方法ajax结束后调用stopRequest;

原因:jquery.ajax.success除了需要状态过关如304和200这样的外还需要返回的类型符合dataType定义,也就是请求头,否则不会执行success。改正返回类型后一切正常了,搞不明白,stopRequest这么重要的东西怎么能放在success里呢,放done里才对嘛,真搞不懂。



本文转自today4king博客园博客,原文链接:http://www.cnblogs.com/jinzhao/archive/2012/09/20/2695384.html,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
43 0
|
7月前
|
存储 前端开发 Java
Spring MVC 中的数据绑定和验证机制是什么,如何使用
Spring MVC 中的数据绑定和验证机制是什么,如何使用
|
3月前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
5月前
|
JavaScript 新能源
jQuery验证车牌号(含新能源车牌)
jQuery验证车牌号(含新能源车牌)
25 1
|
5月前
|
JavaScript
jQuery鼠标离焦验证手机号码
jQuery鼠标离焦验证手机号码
12 0
|
5月前
|
JavaScript
jQuery验证身份证号码
jQuery验证身份证号码
24 0
|
10月前
|
前端开发 Java Spring
《Spring MVC》 第八章 拦截器实现权限验证、异常处理
《Spring MVC》 第八章 拦截器实现权限验证、异常处理
152 0
|
10月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
JavaScript
改造jquery validator ,支持多个name相同的验证
改造jquery validator ,支持多个name相同的验证
117 0