與CKEditor的jQuery驗證插件

我知道這個問題已被問及之前，我已閱讀所有以前的問題，我仍然無法獲得jQuery驗證器來正確驗證CKEditor字段。與CKEditor的jQuery驗證插件

我的形式是以下：

<form id="faq-form"> 
    <p> 
     <label>Title:</label> 
     <input type="text" id="faq-title" name="faq-title" class="faq-title" /> 
    </p> 
    <p> 
     <label for="question">Question:</label> 
     <textarea name="question" id="question"></textarea> 
    </p> 
    <p> 
     <label for="answer">Answer:</label> 
     <textarea name="answer" id="answer"></textarea> 
    </p>    
    <p> 
     <input id="submit-faq" name="submit-faq" type="submit" value="Submit" /> 
    </p> 
</form>

兩個文本域轉換爲使用的CKEditor字段：

<script> 
CKEDITOR.replace('question', { toolbar : 'forum' }); 
CKEDITOR.replace('answer', { toolbar : 'forum' }); 
</script>

當我試圖驗證，只有標題字段中得到確認。我不確定我做錯了什麼。這裏是我驗證的javascript代碼（以下是jQuery文檔就緒函數的座標）。

$('#faq-form').submit(function() { 
    // Update textareas with ckeditor content 
    for (var i in CKEDITOR.instances) { 
     CKEDITOR.instances[i].updateElement(); 
     $.trim($('#' + i).val()); 
    } 

    // Validate the form 
    if (! $('#faq-form').validate({ 
     rules: { 
      'faq-title': { 
       required: true, 
       minlength: 5 
      }, 
      answer: { 
       required: true, 
       minlength: 20 
      }, 
      question: { 
       required: true, 
       minlength: 20 
      } 
     } 
    }).form()) { 
     console.log('Form errors'); 
     return false; 
    }

一旦確認完成，我將使用.post的$方法，而不是一個正常的形式的GET或POST這樣我就可以無需重新加載更新我的網頁。 $ .post在驗證方法之後，但我不認爲有必要顯示。

來源

2013-02-21 Sean

我終於能夠得到它的工作。 CKEditor在運行時隱藏textareas，並且jQuery驗證程序忽略隱藏的元素。在驗證功能中，這可以改變。所以我的新代碼如下：

if (! $('#faq-form').validate({ 
    ignore: "input:hidden:not(input:hidden.required)", 
    rules: { 
     'faq-title': { 
      required: true, 
      minlength: 5 
     }, 
     answer: { 
      required: true, 
      minlength: 20 
     }, 
     question: { 
      required: true, 
      minlength: 20 
     } 
    }, 
    messages: { 
     'faq-title': { 
      required: "The title field is required" 
     }, 
     answer: { 
      required: "The answer field is required" 
     }, 
     question: { 
      required: "The question field is required." 
     } 
    }, 
    errorElement: "span", 
    errorPlacement: function (error, element) { 
     error.appendTo(element.prev()); 
    } 
}).form()) { 
    console.log('Form errors'); 
    return false; 
}

我還添加了消息並顯示，當他們修改了錯誤的元素和位置。我認爲這可能會有助於其他任何絆倒這一點的人。

來源

2013-02-21 23:19:13 Sean

您不應該在條件內使用['.validate（）']（http://docs.jquery.com/Plugins/Validation/validate#options）。這就是['.valid（）'方法]（http://docs.jquery.com/Plugins/Validation/valid）的用途。 '.validate（）'僅用於_initializing_插件與您的規則和選項。一旦初始化，那麼可以在條件中使用'.valid（）'來觸發一個測試並返回一個布爾值。 – Sparky 2013-02-22 00:32:12

Sparky的好處。我應該注意到我的回答實際上是正確的。 – podperson 2013-02-22 01:44:45

所以，當文檔準備就緒時，我應該使用所有配置來運行$ .validate（），然後在$（'＃form'）。submit（）方法中，在窗體上運行.valid（） – Sean 2013-02-22 03:13:22

我的猜測是，CKEditor不能很好地進行驗證，至少在默認情況下。您需要在驗證之前刪除編輯器（CKEditor通過隱藏正在編輯的內容然後插入iframe並將可編輯內容粘貼到此處;當您移除編輯器時，它會關閉iframe並複製內容 - 在至少來自記憶）。我的猜測是，如果你檢查DOM，你會發現textareas的內容沒有改變。

您可能會發現NicEdit在這方面更有用 - 看到這個線程：

https://stackoverflow.com/questions/3914510/wysiwyg-editor-without-iframe

來源

2013-02-21 22:24:04 podperson

CKEditor已經實施並且具有NicEdit似乎沒有的功能。 – Sean 2013-02-21 22:41:05

夠公平的，那麼你只需要將iframe與字段或任何其他線程同步。 – podperson 2013-02-22 20:36:05

您的代碼：

$('#faq-form').submit(function() { 

    // Update textareas with ckeditor content 
    for (var i in CKEDITOR.instances) { 
     CKEDITOR.instances[i].updateElement(); 
     $.trim($('#' + i).val()); 
    } 

    if (! $('#faq-form').validate({ 
     rules: { 
      'faq-title': { 
       required: true, 
       minlength: 5 
      }, 
      answer: { 
       required: true, 
       minlength: 20 
      }, 
      question: { 
       required: true, 
       minlength: 20 
      } 
     } 
    }).form()) { 
     console.log('Form errors'); 
     return false; 
    } 
    ....

你不應該使用.validate()內部條件。這就是.valid() method的用途。 .validate()僅用於初始化插件一旦在DOM準備好您的規則&選項。一旦初始化，然後.valid()可以用於條件觸發測試並返回一個布爾值。

另外，你不應該有裏面的submit處理程序。該插件擁有自己的submitHandler回調函數。

你的代碼應該變成這樣的：我發現到目前爲止，古樸典雅

$(document).ready(function() { 

    $('#faq-form').validate({ // initialize the plugin 
     // rules & options, 
     rules: { 
      'faq-title': { 
       required: true, 
       minlength: 5 
      }, 
      answer: { 
       required: true, 
       minlength: 20 
      }, 
      question: { 
       required: true, 
       minlength: 20 
      } 
     }, 
     submitHandler: function (form) { 
      // Update textareas with ckeditor content 
      for (var i in CKEDITOR.instances) { 
       CKEDITOR.instances[i].updateElement(); 
       $.trim($('#' + i).val()); 
      } 
     } 
    }) 

    if (! $('#faq-form').valid()) { // test the form for validity 
     console.log('Form errors'); 
     return false; 
    } 

});

來源

2013-02-22 00:36:42 Sparky

最好的解決辦法：

$('#form1').validate({ 
     ignore: [], 
     rules: { 
      corpo : { 
       required: function() 
       { 
        CKEDITOR.instances.corpo.updateElement(); 
       } 
      } 
     } 
    })

字體：http://devlog.waltercruz.com/usando-ckeditor-e-jquery-validate-juntos

來源

2013-09-02 12:12:56

確定可以剪下來，我花了好幾個小時才把CKEditor的錯誤信息放在正確的地方，因爲每次它顯示在CKEditor的頂部或緊跟在不是l的標籤之後好的。

由於CKEditor隱藏textarea並將其span標記放在textarea後面。請使用瀏覽器工具檢查dom元素，然後您可以看到textarea被隱藏。

我只是調整了代碼，以獲取CKEditor下的錯誤消息標籤/ span。

 $('#messageForm').validate(
      { 
       ignore: 'input:hidden:not(input:hidden.required)', 
       rules: { 
        msgTitle: { 
         minlength: 2, 
         required: true 
        }, 
        msgText: { 
         minlength: 2, 
         required: true 
        } 
       }, 
       errorElement: "span", // can be 'label' 
       errorPlacement: function (error, element) { 
        if ($(element).attr('id') == 'msgText') { 
         $('#cke_msgText').after(error); 
        } else { 
         element.after(error); 
        } 
       }, 
       highlight: function (element) { 
        $(element).closest('.form-group').removeClass('text-success').addClass('error'); 
       }, 
       success: function (element) { 
        element 
         .closest('.form-group').removeClass('error').addClass('text-success'); 
       } 
      });

這裏，「MSGTEXT」是隱藏textarea的ID和CKEditor的的cke_msgText ID，您可以通過檢查DOM元素找到ID，也許CKEditor的需要textarea的和前綴的id屬性'cke_'。

來源

2013-09-20 01:08:31

<form> 
     <textarea class="ckeditor" id="noticeMessage" name="message"></textarea> 
    </form> 
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 



    <form> 
     <textarea class="ckeditor" id="noticeMessage" name="message"></textarea> 
    </form> 
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
    <script type="text/javascript"> 
     $("form").submit(function() { 
      var messageLength = CKEDITOR.instances['noticeMessage'].getData().replace(/<[^>]*>/gi, '').length; 
      if(!messageLength) { 
       alert('Please enter a message'); 
      } 
     } 
    </script> 

see for full reference 
---------------------- 

http://christierney.com/2012/12/14/ckeditor-4-required-field-validation/

來源

2014-07-02 07:22:40

與CKEditor的jQuery驗證插件

回答

相關問題