JQuery проверки текстовой области, интегрированной с Ckeditor

Question

У меня есть text-area

<td><textarea id="event-body" name="body">
<p class="error"></p>

, который интегрирован с CKEDITOR

CKEDITOR.replace("event-body")

и jquery validate plugin .И код выглядит так:

$('#event').validate({
    rules:{
        name:{
            required: true
        },  
    },
    messages:{
        body:{
            required: "event body is required"
        }
    },
    errorPlacement: function(error, element){
        $(element).each(function (){
            $(this).parent('td').find('p.error').html(error);
        })
    });

Код работает просто отлично, но когда я набираю текст в своем элементе textarea, я все равно получаю сообщение об ошибке, пока дважды не нажму на него.т.е. я должен дважды отправить свою страницу, чтобы не выдавать сообщение об ошибке, даже если textarea не пусто.

Нет ли способа проверить его гладко (без необходимости дважды щелкать по нему).

Answer 1

Взгляните здесь

В основном вам нужно позвонить

CKEDITOR.instances.editor1.updateElement();

перед выполнением проверки.

Просто замените editor1 наимя вашей текстовой области.

Затем позвоните

$(myformelement).validate();

РЕДАКТИРОВАТЬ

$("#my-form-submit-button").click(function(e){
     e.preventDefault();
     CKEDITOR.instances.event-body.updateElement();
     $('#event').validate({
          ...options as above..
     });o
})

Answer 2

Валидатор jQuery проверяет только те поля ввода, которые видны, но CKEDITOR скрывает текстовую область, предотвращая ее проверку.

Answer 3

Поместите это в событие отправки кнопки mousedown ():

$("#submit").mousedown(function(){
  for (var i in CKEDITOR.instances){
    CKEDITOR.instances[i].updateElement();
  }
});

Answer 4

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

Мой код:

<form id="create-message-form-3" class="form-horizontal" role="form" accept-charset="utf-8">
                <div class="title"><h1>Add Content:</h1></div>
                <div class="col col-12">
                  <textarea class="form-control ckeditor" name="templateeditor" id="templateeditor" rows="6"></textarea>
                  <p class="error"></p>
                </div>



                <div class="text-center">
                    <a class="btn btn-success pull-left" href="create-message-2.php">Back</a>
                    <input class="btn btn-default" type="button" value="Save">
                    <input id="submit-templateeditor" class="btn btn-success pull-right" type="submit" value="Next Step">
                </div>
             </form>

В моем файле .css я заставил свой быть таким:

textarea.ckeditor {
visibility: visible !important;
display: block !important;
height: 0px !important;
border: none !important;
resize:none;
overflow: hidden; }

И моя валидация .js - нормальный формат:

    $("#submit-templateeditor").click(function(){
     CKEDITOR.instances.templateeditor.updateElement();
     $("#create-message-form-3").validate({
        rules: {
            templateeditor: "required"
        },
        messages: {
            templateeditor: "Please add some code before continue"
        },
        errorPlacement: function(error, element){
            $(element).each(function (){
                $(this).parent('div').find('p.error').html(error);
            });
        }
    });
});

Answer 5

Функция jQuery .validate () предоставляет возможность «onsubmit» для выполнения пользовательских действий перед проверкой.По умолчанию установлено значение true.Я использовал его в своем проекте, и он работает очень хорошо.См. http://jqueryvalidation.org/validate#onsubmit

Answer 6

Я бы предпочел обновлять каждый экземпляр события размытия, поэтому вам не нужно ничего менять в функции отправки! :)

$('#myInstance').ckeditor({toolbar:'MyToolbar'});
CKEDITOR.instances.myInstance.on('blur', function( e ){
    CKEDITOR.instances.myInstance.updateElement();
});

Answer 7

Если вы прикрепляете его как

$("#Detail").ckeditor(config);

, тогда вам нужно будет использовать что-то вроде этого

var editor = $('#Detail').ckeditorGet();
editor.updateElement();

Я использую этот пример функции для отправки формы в этом случае

function SubmitEvent(){
    var editor = $('#Detail').ckeditorGet();
    editor.updateElement();
    if($("#EventForm").valid()) {
        $('#EventForm').submit();
    }
}

Answer 8

Используйте это в своем JavaScript, где вы проверяете свою форму.Он обновит ваш ckeditor и назначит значение ckeditor вашей текстовой области, в которую вы его интегрируете.

Должен выполняться до отправки формы:

CKEDITOR.instances.editor1.updateElement();

Answer 9

ЕСЛИ вы используете SPRY, это то, что сработало для меня ....

<script>
$(document).ready(function () {

    CKEDITOR.instances["editor1"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor1"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor1"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor1"].updateElement(); });

    });

    CKEDITOR.instances["editor2"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor2"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor2"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor2"].updateElement(); });

    });

    CKEDITOR.instances["editor3"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor3"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor3"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor3"].updateElement(); });

    });

});
</script>