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

　　辛苦的研究成果，但願對你們有所幫助！請給小編一個贊！謝謝！