xheditor与validate插件冲突的解决方案


Posted in Javascript onApril 15, 2010

xheditorvalidate都是优秀的jQuery插件,但将两者组合到起,如果初始化的顺序不当,则会出现一些微妙的结果。我在做一个文本提交页面时就同时用到了这两个插件,一个用于显示富文本编辑器,一个用来验证用户是否填写的内容,我的初始化代码如下:

$("#form1").validate({ 
rules: { 
Body: "required" 
}, 
messages: { 
Body: "请填写正文" 
} 
}); 
var editor = $("#Body").xheditor(true, { 
tools: "simple" 
});

但在提交时,尽管已经填写了内容,第一次点击提交按钮时仍然显示“请填写正文”,第二次点击提交按钮时才会真正提交,这一现象让我百思不得其解,究竟问题出在哪了呢?

因为当前项目中有多个页面都用到了这两个插件,而其中有一个页面提交时是正常的,于是我便仔细的对比了正常的和有问题的页面异同,发现初始化的顺序不一样。在能正常提交的页面中先初始化的xheditor,然后初始化的validate,而有问题的页面正好相反,原来是这样!问题到此也用迎刃而解了,只要颠倒这两个插件的初始化顺序,让xheditor在validate之前初始化,就可避免“两次提交”问题的发生。

希望本文对您有所帮助。

CKEditor也有这问题,我解决方法是获取Editor里内容放入到textarea里就好了。

Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
js文字横向滚动特效
Nov 11 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
js 获取Listbox选择的值的代码
Apr 15 #Javascript
JavaScript toFixed() 方法
Apr 15 #Javascript
js function定义函数使用心得
Apr 15 #Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 #Javascript
关于文本框的一些限制控制总结~~
Apr 15 #Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 #Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 #Javascript
You might like
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
详解webpack 多入口配置
2017/06/16 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
深入理解Promise.all
2018/08/08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
使用Python对Excel进行读写操作
2017/03/30 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python3转换code128条形码的方法
2019/04/17 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
基于Python实现天天酷跑功能
2021/01/06 Python
花卉与景观设计系大学生求职信
2013/10/01 职场文书
求职信范文怎么写
2014/01/29 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
离职保密承诺书
2014/05/28 职场文书
结对共建协议书
2014/08/20 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python