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 相关文章推荐
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue常用高阶函数及综合实例
Feb 25 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Django 反向生成url实例详解
2019/07/30 Python
Python实现微信机器人的方法
2019/09/06 Python
Python程序暂停的正常处理方法
2019/11/07 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
促销活动总结报告
2014/04/26 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014年就业工作总结
2014/11/26 职场文书
公历12个月名称的由来
2022/04/12 杂记