解决百度ueditor编辑器内容在jquery.validate中不验证问题
2017-11-15 11:20
477 查看
问题场景
不验证原因
解决方法
这个方法在调用form方法验证的时候调用,其中this.elements()方法获取表单中所有的元素和他们的值:
其中一行not(this.settings.ignore)表示把显示状态为hidden的元素过滤掉,而恰巧,ueditor的实现方式正是初始化后把textarea隐藏,这就导致了在jquery.validate的rules里配置了验证规则却不验证。
![](https://img-blog.csdn.net/20171115114111629?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY3NTI3NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
如果直接显示textarea会直接在文本编辑器下面展示,这样肯定是不行的,只需要根据文本编辑器的位置设置textarea的位置,使它展示在编辑器后面z-index就ok。下图是验证结果:
![](https://img-blog.csdn.net/20171115114535916?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY3NTI3NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
以上只是根据实际开发中遇到的问题给出的解决方案,可能在现版本中已经没有问题了。这篇博客是鄙人第一篇原创博客,有什么不对的或不合理的地方希望道友们慷慨指出,不胜感激。
不验证原因
解决方法
问题场景
最近项目中表单数据提交用到了百度的文本编辑器ueditor,同时表单的验证用到了jquery.validate验证工具,并添加了content的非空验证,提交表单后发现ueditor的内容并没有验证文本内容。不验证原因
随后就看了下jquery.validate的源码,发现其中一段:checkForm: function() { this.prepareForm(); for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) { this.check( elements[ i ] ); } return this.valid(); }
这个方法在调用form方法验证的时候调用,其中this.elements()方法获取表单中所有的元素和他们的值:
elements: function() { var validator = this, rulesCache = {}; // Select all valid inputs inside the form (no submit or reset buttons) return $( this.currentForm ) .find( "input, select, textarea, [contenteditable]" ) .not( ":submit, :reset, :image, :disabled" ) .not( this.settings.ignore ) .filter( function() { var name = this.name || $( this ).attr( "name" ); // For contenteditable if ( !name && validator.settings.debug && window.console ) { console.error( "%o has no name assigned", this ); } // Set form expando on contenteditable if ( this.hasAttribute( "contenteditable" ) ) { this.form = $( this ).closest( "form" )[ 0 ]; } // Select only the first element for each name, and only those with rules specified /* if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) { return false; }*/ rulesCache[ name ] = true; return true; } ); }
其中一行not(this.settings.ignore)表示把显示状态为hidden的元素过滤掉,而恰巧,ueditor的实现方式正是初始化后把textarea隐藏,这就导致了在jquery.validate的rules里配置了验证规则却不验证。
解决方法
其实解决办法很简单,只需要在验证之前把隐藏的textarea显示出来就ok了,只是如果直接显示可能会有问题,比如下图这样:如果直接显示textarea会直接在文本编辑器下面展示,这样肯定是不行的,只需要根据文本编辑器的位置设置textarea的位置,使它展示在编辑器后面z-index就ok。下图是验证结果:
以上只是根据实际开发中遇到的问题给出的解决方案,可能在现版本中已经没有问题了。这篇博客是鄙人第一篇原创博客,有什么不对的或不合理的地方希望道友们慷慨指出,不胜感激。
相关文章推荐
- 解决百度Ueditor编辑器表格不显示边框问题
- ecshop整合ueditor替换百度编辑器 ,解决ie浏览器下宽度为0的问题
- 『转载』jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
- 用JQuery Validate框架,在IE8下验证报错问题解决
- jQuery Validate写的验证规则不生效问题解决
- 【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
- 解决百度Ueditor编辑器表格不显示边框问题
- 百度uedit编辑器,内容重复问题的分析与解决实例
- jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
- jquery.form.js的ajax提交,CKEditor编辑器内容丢失问题的解决方法!
- 使用jquery Validate的时候验证出错的提示显示位置问题
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- 【转】jquery validate验证框架与kindeditor使用需二次提交的问题
- 通过Page_ClientValidate解决验证控件和confirm冲突的问题
- 解决Ueditor编辑器图片保存路径问题
- 齐博门户网站:解决百度ueditor支持iframe框架页面的视频播放问题
- 你怎么解决那个 jQuery的validate 在ie下无效的问题的?
- 百度ueditor 编辑器使用问题收集
- jquery向div添加内容时中文乱码问题解决方法
- 百度Ueditor编辑器的Html模式自动替换样式的解决方法