summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

1.使用summernote富文本编辑器提交图片到服务器

　　在使用bootstrap中，我们用到了summernote富文本编辑器，使用summernote将图片上传到服务器中，参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html

2.在使用summernote编辑完文本，使用validate进行表单验证出现问题的解决方案

　　小编在使用summernote富文本编辑器编辑完文章内容，并且上传了图片，对于编写的内容使用了validate进行了表单验证，结果发现表单无法提交。

html代码：

<form method="post" action="{:U('article/add')}" id="add" enctype="multipart/form-data"><textarea type="text"  name="content" id="summernote"></textarea><button type="submit" class="btn btn-default" id="subButton">提交</button>
</form>

js中进行validate表单验证

$("#add").validate({rules: {content:{required: true}},messages: {content:{required: "请输入内容"}}});

　　现在，我们编辑完文章，并且一定附带有图片，此时，我们点击提交，发现表单validate并没有提示错误，但是发现无法进行表单提交。

　　重点：那么原因出现在这里，summernote将图片上传到服务器的时候，我们在选择图片的时候，进行了图片文件上传到服务器的过程，其实在这个过程中，summernote编辑器进行了文件的上传，就在此时，就在此时，就在此时，文件上传的时候，其实就默认进行了一次文件上传的files的validate验证，（accept验证，具体的可以查看summernote上传图片的源代码）也就是说在上传图片文件的过程中，进行了一次validate的accept表单验证，并且出现了错误，但是这个错误提示信息无法显示出来，致使表单无法提交。不懂得话多读几次，或者自己查看summernote源代码，查看图片上传文件的<input>就能明白。是需要实际动手研究的。

　　解决方案：

$("#add").validate({//使用validate中的ignore忽略summernote上传文件的验证，summernote的写法是固定的，其它编辑器根据实际情况而定ignore:".note-image-input,.note-group-select-from-files",rules: {content:{required: true}},messages: {content:{required: "请输入内容"}}});

我们在这里，使用ignore忽略上传图片文件的验证，那么summernote+validate就能顺利执行了。

　　了解validate更多的参数，请看：http://www.cnblogs.com/jingmin/p/6294982.html

　　辛苦的研究成果，希望对大家有所帮助！请给小编一个赞！谢谢！

转载于:https://www.cnblogs.com/jingmin/p/6602883.html

summernote富文本编辑器配合validate表单验证无法进行表单提交的问题相关推荐

summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...

summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

summernote富文本编辑器配合validate表单验证无法进行表单提交的问题相关推荐

最新文章

热门文章