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

　　辛苦的研究成果，但愿对你们有所帮助！请给小编一个赞！谢谢！