xheditor与validate插件冲突的解决方案

xheditor和validate都是优秀的jQuery插件，但将两者组合到起，如果初始化的顺序不当，则会出现一些微妙的结果。我在做一个文本提交页面时就同时用到了这两个插件，一个用于显示富文本编辑器，一个用来验证用户是否填写的内容，我的初始化代码如下：


代码如下:

$("#form1").validate({
rules: {
Body: "required"
},
messages: {
Body: "请填写正文"
}
});
var editor = $("#Body").xheditor(true, {
tools: "simple"
});

但在提交时，尽管已经填写了内容，第一次点击提交按钮时仍然显示“请填写正文”，第二次点击提交按钮时才会真正提交，这一现象让我百思不得其解，究竟问题出在哪了呢？

因为当前项目中有多个页面都用到了这两个插件，而其中有一个页面提交时是正常的，于是我便仔细的对比了正常的和有问题的页面异同，发现初始化的顺序不一样。在能正常提交的页面中先初始化的xheditor，然后初始化的validate，而有问题的页面正好相反，原来是这样！问题到此也用迎刃而解了，只要颠倒这两个插件的初始化顺序，让xheditor在validate之前初始化，就可避免“两次提交”问题的发生。

希望本文对您有所帮助。

CKEditor也有这问题，我解决方法是获取Editor里内容放入到textarea里就好了。

赞 (0)

相关推荐

  • jquery.validate使用攻略 第二部

    Plugin methodsName Type validate( options ) Returns: Validator 验证所选的FORM valid( ) Returns: Boolean 检查是否验证通过 rules( ) Returns: Options 返回元素的验证规则 rules( "add", rules ) Returns: Options 增加验证规则 rules( "remove", rules ) Returns: Options 删除验

  • jquery.validate使用攻略 第一部

    主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址 http://docs.jquery.com/Plugins/Validation jquery.validate插件的主页 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

  • jquery validate使用攻略 第四步

    默认情况下,验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式. /* 输入控件验证出错*/ form input.error { border:solid 1px red;} /* 验证错误提示信息*/ form label.error{width: 200px;margin-left: 10px; color: Red;} 如果想自定义显示方式,可以修改jquery.validate的默认显示方式 默认用label显示

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • jQuery.Validate 使用笔记(jQuery Validation范例 )

    验证操作类formValidatorClass.js 复制代码 代码如下: /** * @author ming */ $(document).ready(function(){ /**//* 设置默认属性 */ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符验证 jQuery.validator.addMethod("stringCheck", function(

  • 使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

    主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写). 2.必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象. 3.影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服. 4.ajax验证不方便,现在的系统越来越注重客户的用户体验,

  • jquery.validate使用攻略 第三部

    1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({ submitHandler: function(form) { alert("验证通过"); } }); 如果需要提交表单,可以调用 form.submit(); 或者$(form).ajaxSubmit(); 2: 调试模式 将debug设置为true,表单不会提交,只进行检查,方便调试 $(".selector").v

  • jValidate 基于jQuery的表单验证插件

    jValidate 基于jQuery的表单验证插件

    网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme

  • jquery.validate使用攻略 第五步 正则验证

    // 手机号码验证 jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(value)); }, "手机号

  • xheditor与validate插件冲突的解决方案

    xheditor和validate都是优秀的jQuery插件,但将两者组合到起,如果初始化的顺序不当,则会出现一些微妙的结果.我在做一个文本提交页面时就同时用到了这两个插件,一个用于显示富文本编辑器,一个用来验证用户是否填写的内容,我的初始化代码如下: 复制代码 代码如下: $("#form1").validate({ rules: { Body: "required" }, messages: { Body: "请填写正文" } }); var

  • jQuery Validate插件实现表单验证

    jQuery Validate插件实现表单验证

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.更重要的是他是由jQuery 团队. jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的.具体我们可以访问 jQuery Validate 官网,下载

  • JQuery validate插件验证用户注册信息

    JQuery validate插件验证用户注册信息

    使用JQuery的validate插件做客户端验证非常方便,下面做一个使用validate插件验证用户注册信息的例子. 本实例使用的是1.5版本. 示例是在SSH下做的,代码如下: registe.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

  • 如何解决vue与传统jquery插件冲突

    本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1.0 例子2.0 大功告成.说说基于vue1的,对于下拉单选,用vue官方的例子即可,对于多选,看下面自己写的,核心是用指令对象的el.vm等获取被select2改

  • linux 下同名符号冲突问题解决方案

    linux 下同名符号冲突问题解决方案 最近的工作中遇到如下令人蛋疼的问题: Linux 下有三个模块aa.bb.cc,基本情况如下: cc 编译连接得到 cc.so 动态库,cc 中有如下接口: cc_fun { -- do();//调用名为do的cc模块内部函数 -- } bb 编译连接得到 bb.a 静态库,bb 中有如下接口: bb_fun { -- handle = dlopen(cc.so, RTLD_LAZY);//加载cc.so pccfun = dlsym(handle, "c

  • jQuery validate插件实现ajax验证重复的2种方法

    本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

  • JQuery validate插件Remote用法大全

    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支 JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. . 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery.validate.js是对JQuery的一个插件,可以认为是对JQuery在某个特殊场景下的扩展,而Validate就是对表

  • jQuery Validate插件自定义验证规则的方法

    作为一个有强迫症存在的人,最见不得就是不统一的格式,对不齐的代码.所以在对表单填写项进行validate插件验证时,有一些验证规则是根据实际需要个性化定制的.如果不扩展validate插件规则,就会导致验证提示的表现方式不同,这简直能逼死强迫症.所以我就查找了一下,validate插件果然也有能自定义验证规则的方法,简直是强迫症患者的救星.话不多说,我们来看看是如何自定义的吧. //该方法对提现金额进行判断,看账户中是否有足够的金钱提现 function check_price(){ //提现额

  • jQuery validate插件submitHandler提交导致死循环解决方法

    本文实例讲述了jQuery validate插件submitHandler提交导致死循环解决方法.分享给大家供大家参考,具体如下: dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$('').submit();提交时,jquery validate会进行验证,submitHandler里面如果写了$('').submit();会导致死循环,而form.

  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

随机推荐