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

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

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

Я только что настроил код, чтобы получить сообщение об ошибке label / span прямо под 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' - это идентификатор textarea, который скрыт, и cke_msgtext id ckeditor, вы можете найти идентификатор, проверив элемент dom, возможно, ckeditor берет атрибут id textarea и префикс 'cke_' с ним.

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

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

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

Ваш код:

$('#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() Метод предназначен для. .validate() используется только для инициализации плагинаодин раз на DOM ready с вашими правилами и опциями. После инициализации .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;
    }

});

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

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

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

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