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 相关文章推荐
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
vue v-on监听事件详解
May 17 Javascript
原生js二级联动效果
Jun 20 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
解决vue中provide inject的响应式监听
Apr 19 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调用数据库的存贮过程
2006/10/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
json 定义
2008/06/10 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
StringBuilder和String的区别
2015/05/18 面试题
2014年自愿离婚协议书
2014/10/10 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
小学毕业感言200字
2015/07/30 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers