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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
Vue实现一个图片懒加载插件
Mar 11 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和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
js玩一玩WSH吧
2007/02/23 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
在Linux下调试Python代码的各种方法
2015/04/17 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python访问hdfs的操作
2020/06/06 Python
自动化系在校本科生求职信
2013/10/23 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
逃课检讨书
2015/01/26 职场文书
nginx 配置指令之location使用详解
2022/05/25 Servers