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

Я взял предыдущий ответ и конкретизировал его с помощью фактического 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/

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

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

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

мы можем проверить 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.

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

<input type="submit"/>

форма проверяется только при отправке.

Проверьте пример на этой скрипке:http://jsfiddle.net/5RrGa/800/

существующие ответы хороши, они предоставляют решения для проверки только на кнопку отправки, здесь некоторый код для реактивная проверка полей 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.редактор. Трудно было найти правильного дока на этом сайте.

простой фрагмент кода работал для меня.

CKEDITOR.replace( 'textarea_input_name');

$( "#form_id" ).submit( function( e ) { 
     //in case, if didn't worked, remove below comment. This will get the textarea with current status
    //CKEDITOR.instances.textarea_input_name.updateElement( ); 
    var messageLength = CKEDITOR.instances['textarea_input_name'].getData( ).replace( /<[^>]*>/gi, '' ).length;
    if( !messageLength )
    {
        alert( 'Please fill required field `Text`' );
        //stop form to get submit
        e.preventDefault( );
        return false;
    }
    else
    {
        //editor is not empty, proceed to submit the form
        return true;
    }
} );

надеюсь, что это помогает!!!

поле Ckeditor Bydefault не проверяется с помощью требуемого правила. Мы должны создать пользовательский метод валидатора для этого -

jQuery.validator.addMethod('ckrequired', function (value, element, params) {
    var idname = jQuery(element).attr('id');
    var messageLength =  jQuery.trim ( CKEDITOR.instances[idname].getData() );
    return !params  || messageLength.length !== 0;
}, "Image field is required");

и самое главное пустой массив игнорирования -

<script>
$(document).ready(function(){
    $("#f3").validate({
        ignore : [],
        rules: {
        cktext:{    
            ckrequired:true
        }
    }
            });
        });
      </script>

теперь все готово.