解决百度ueditor编辑器内容在jquery.validate中不验证问题

标签: 文本编辑  编辑器  表单

问题场景

最近项目中表单数据提交用到了百度的文本编辑器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。下图是验证结果:
修改后
以上只是根据实际开发中遇到的问题给出的解决方案,可能在现版本中已经没有问题了。这篇博客是鄙人第一篇原创博客,有什么不对的或不合理的地方希望道友们慷慨指出,不胜感激。

版权声明:本文为u011675274原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u011675274/article/details/78538888