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 使用点滴函数代码
May 20 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
Vue3中的Refs和Ref详情
Nov 11 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
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python中max函数用法实例分析
2015/07/17 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python如何访问字符串中的值
2020/02/09 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
益模软件Java笔试题
2012/03/27 面试题
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
大学生求职推荐信
2013/11/27 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
python实现简单倒计时功能
2021/04/21 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫