Плагин проверки jQuery с CKEditor

Question

Я знаю, что этот вопрос задан раньше, и я прочитал все предыдущие вопросы, и я до сих пор не могу заставить валидатор jQuery правильно проверять поля CKEditor.

Моя форма ниже:

<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 вместо нормальной формы получить или отправить, так что я могу обновить мою страницу без перезагрузки. $ .post приходит после метода проверки, но я не думал, что это нужно было показать.

Answer 1

я, наконец, смог получить его работу. CKEditor скрывает текстовые поля, когда он запускается, и валидатор jQuery игнорирует скрытые элементы. В функции validate это можно изменить. Таким образом, мой новый код ниже:

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; 
} 

Я также добавил сообщения и изменил элемент и местоположение ошибок при их отображении. Я полагал, что это может быть полезно для всех, кто спотыкается об этом.

Answer 2

Я полагаю, что CKEditor не играет хорошо с проверкой, по крайней мере, по умолчанию. Вам нужно будет удалить редакторы перед проверкой (CKEditor работает, скрывая редактируемую вещь, а затем вставляя iframe и вставляя туда редактируемый контент; при удалении редактора он отключает iframe и копирует содержимое - при по крайней мере, из памяти). Я предполагаю, что если вы проверите DOM, вы увидите, что содержимое текстовых полей не меняется.

Вы можете найти NicEdit более полезным в этом контексте - см эту тему:

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

Answer 3

Ваш код:

$('#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() может использоваться внутри условных выражений для запуска теста и возврата логического значения.

Кроме того, у вас не должно быть .validate() внутри 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; 
    } 

}); 

Answer 4

Лучшее решение, которое я нашел до сих пор, простой и элегантный:

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

шрифта: http://devlog.waltercruz.com/usando-ckeditor-e-jquery-validate-juntos

Answer 5

Ok позволяет сократить его , Я потратил часы, чтобы получить сообщение об ошибке CKEditor в нужном месте, потому что каждый раз, когда он появляется поверх CKEditor или сразу после метки, которая не является l хорошо.

Поскольку CKEditor скрывает текстовое поле и помещает его тег span прямо после текстового поля. Пожалуйста, используйте инструмент браузера для проверки элементов dom, после чего вы можете видеть, что текстовое поле скрыто.

Я только что скорректировал код, чтобы получить метку/область сообщения об ошибке только под CKEditor.

 $('#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» является идентификатором текстового поля, который скрыт, и cke_msgText идентификатор CKEditor, вы можете найти идентификатор, осматривая элемент DOM, возможно CKEditor принимает идентификатор атрибута в текстовом поле и приставку 'cke_' с этим.

Answer 6

<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/