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获取input表单值的代码
Apr 19 Javascript
页面使用密码保护代码
Apr 10 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
简单实现node.js图片上传
Dec 18 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
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
优化使用mysql存储session的php代码
2008/01/10 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
JavaScript实现单英文金山打字通
2020/07/24 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
高职教师岗位职责
2013/12/24 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
师德师风承诺书
2014/05/23 职场文书
护校行动方案
2014/05/31 职场文书
社区服务活动报告
2015/02/05 职场文书
文艺演出主持词
2015/07/01 职场文书
Nginx快速入门教程
2021/03/31 Servers
Vue和Flask通信的实现
2021/05/19 Vue.js
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript