雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

TinyMCE使用jquery.validate提交表单时内容为空 不兼容

2024-09-07 30

最近把博客的编辑器从百度编辑器改为TinyMCE,提交表单时发现用jquery.validate插件验证表单时不会验证textarea,如果不验证直接ajax提交表单的话,textarea的值是空的。

查看元素可以看到使用TinyMCE初始化后,真实的textarea会被隐藏然后render出一个富文本编辑器:

<textarea name="AContent" id="AContent" class="notnull" aria-hidden="true" style="display: none;"></textarea>

解决方法是初始化时,在init_instance_callback里处理change事件,当富文本框内容变化时,调用 tinyMCE.triggerSave();

tinymce.init({
    init_instance_callback: function (editor) {
            editor.on("Change", function (e) {
                tinyMCE.triggerSave();
                $('#'+id).valid();
                $(editor.targetElm).valid();
            });
        }
});

然后在validate的地方加上ignore,因为textarea被隐藏了不会被检查,加上这个ignore设置就会检查textarea。

$.validator.setDefaults({
    ignore: ":hidden:not(textarea)"
});

这样TinyMCE和jquery.validate就可以兼容使用了,提交表单textarea就有值了。

更新于:2个月前
赞一波!

文章评论

评论问答