Проверка JQuery не работает с ckeditor

Ответ 1

Наконец, я нашел ответ на свой вопрос...

Я изменил значение свойства ignore, которое по умолчанию имеет значение: hidden value. поскольку CKEDITOR скрывает проверку jQuery в textarea, не проверяет элемент:

   ignore: []  

Просто я изменил валидацию script следующим образом.

     $(document).ready(function(){

            $("#f3").validate(
            {
                ignore: [],
              debug: false,
                rules: { 

                    cktext:{
                         required: function() 
                        {
                         CKEDITOR.instances.cktext.updateElement();
                        },

                         minlength:10
                    }
                },
                messages:
                    {

                    cktext:{
                        required:"Please enter Text",
                        minlength:"Please enter 10 characters"


                    }
                }
            });
        });

HTML-фрагмент

   <form class="form-horizontal" role="form" name="f3" id="f3" >
     <div class="col-xs-8">
        <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
    </div>
     <button type="submit" class="btn btn-default btn-success">Submit</button>
   </form>

Как я нашел этот ответ в здесь

Спасибо всем...

Ответ 2

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

Ключевыми битами являются следующие:

CKEDITOR.on('instanceReady', function () {
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
        CKEDITOR.instances[instance].document.on("paste", CK_jQ);
        CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
        CKEDITOR.instances[instance].document.on("blur", CK_jQ);
        CKEDITOR.instances[instance].document.on("change", CK_jQ);
    });
});

function CK_jQ() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}

Что я получил от этого ответа к другому, но аналогичному вопросу.

Другая ошибка, с которой вы столкнулись, - это опечатка minlength в объекте правил.

Это то, что похоже на работу: http://jsfiddle.net/ryleyb/QcJ57/

Ответ 3

jQuery.validator.setDefaults({
    ignore: [],
    // with this no hidden fields will be ignored E.g. ckEditor text-area
});

Я заметил, что валидация работала над 2-й подачей. Причина в том, что ckEditor скрывает фактическую текстовую область и помещает iframe в качестве экземпляра редактора, а при отправке ее подталкивает содержимое в текстовую область. Это означает, что проверка на TextArea выполняется с использованием устаревших данных. Чтобы исправить эту проблему, я обновляю свой TextArea при изменении текста экземпляра редактора.

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on('change', function ()
        {
            var editorName = $(this)[0].name;
            CKEDITOR.instances[editorName].updateElement();
        });
    }

Ответ 4

Вам нужно поместить кнопку отправки в вашу форму:

<input type="submit"/>

Форма подтверждается только при отправке.

Отметьте пример этой скрипты: http://jsfiddle.net/5RrGa/800/

Ответ 5

Существующие ответы хороши, они предоставляют решения для проверки только на кнопке отправки, здесь есть код для реактивной проверки полей ckeditor, например, проверка правильности jquery по умолчанию. Поместите это в свой ckeditor/config. JS:

CKEDITOR.on('instanceReady', function (e) {
    var instance = e.editor;
    instance.on("change", function (evt) {
        onCKEditorChange(evt.editor);
    });
    //key event handler is a hack, cause change event doesn't handle interaction with these keys 
    instance.on('key', function (evt) {
        var backSpaceKeyCode = 8;
        var deleteKeyCode = 46;
        if (evt.data.keyCode == backSpaceKeyCode || evt.data.keyCode == deleteKeyCode) {
            //timeout needed cause editor data will update after this event was fired
            setTimeout(function() {
                onCKEditorChange(evt.editor);
            }, 100);
        }
    });
    instance.on('mode', function () {
        if (this.mode == 'source') {
            var editable = instance.editable();
            editable.attachListener(editable, 'input', function (evt) {
                onCKEditorChange(instance);
            });
        }
    });
});

function onCKEditorChange(intance) {
    intance.updateElement();
    triggerElementChangeAndJqueryValidation($(intance.element.$));
}

function triggerElementChangeAndJqueryValidation(element) {
    element.trigger('keyup');
}

Бонус. Если вы используете пользовательские кнопки отправки и обработчики для своей формы, теперь вам не нужно явно вызывать CKEDITOR.instances["yourtextarea"].updateElement(); перед отправкой формы через ajax для ваш сервер.

Также не забудьте позвонить:

jQuery.validator.setDefaults({
    ignore: []
});

Мой CKeditor: версия: "4.5.4", версия: "d4677a3" Doc для событий ckeditor: http://docs.ckeditor.com/#!/api/CKEDITOR.editor. Трудно было найти правильный документ на этом сайте.

Ответ 6

мы можем проверить ckeditor, используя проверку jquery, используя следующий фрагмент кода.

<input type="text" name="firstname" id="firstname"/>
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>

$("#myForm").validate({
   ignore: [],

     rules:{
            firstname:{
            required:true
        },
    editor1: {
       required: function(textarea) {
       CKEDITOR.instances[textarea.id].updateElement();
       var editorcontent = textarea.value.replace(/<[^>]*>/gi, '');
       return editorcontent.length === 0;
     }
               }
     },messages:{
            firstname:{
            required:"Enter first name"
        }

     }
   });

для получения дополнительной информации о валидации нажмите здесь http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation.