web-dev-qa-db-ja.com

jquery検証がckeditorで機能しない

フォームの検証にjQueryを使用していますが、CKeditorを使用してjQueryを使用して検証しようとすると、機能しません。

これは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>

これがフォーム検証コードです

    <script>
           $(document).ready(function(){
           $("#f3").validate(
            {
              debug: false,
                rules: { 
                    cktext:{

                     required:true,
                     minlenght:10
                    }
                 }
            });
        });
      </script>

参考：他のフォームフィールドで機能するjquery検証はckeditor textareaを期待しています

この問題を取り除くための提案..

jqueryjquery-validateckeditor
18
PHPCoder

最後に私は私の質問への答えを見つけました...

デフォルトで：hidden値を保持するignoreプロパティの値を変更しました。 CKEDITORがtextareaを非表示にするため、jQuery検証は要素を検証しません。

   ignore: []

検証スクリプトを次のように変更しただけです。

     $(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>

私がこの答えを Here で見つけたので

ありがとうございます...

31
PHPCoder

私は前の答えを取り、実際のCKEditorで具体化したので、CKEditorのコンテンツをテキストエリアにコピーするために何が必要かを確認できますbefore 参加する。

重要なビットはこれです：

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

この答え から得たものですが、別の類似した質問です。

もう1つのエラーは、ルールオブジェクトのminlengthのスペルミスです。

これは機能しているように見えます： http://jsfiddle.net/ryleyb/QcJ57/

5
Ryley
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();
        });
    }
2
Mukesh Bhojwani

次のコードを使用して、jquery検証を使用してckeditorを検証できます。

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

1
DotNetLover

フォームに送信ボタンを配置する必要があります。

<input type="submit"/>

フォームは、送信時にのみ検証されます。

このフィドルの例を確認してください： http://jsfiddle.net/5RrGa/800/

0
Leonardo Delfino

jquery検証プラグインなしでckeditorを検証...

$("form").submit( function(e) {
      var messageLength = CKEDITOR.instances['editor'].getData().replace(/<[^>]*>/gi, '').length;
      if( !messageLength ) {
          alert( 'Please enter a message' );
          e.preventDefault();
       }
 });
0
Mani

デフォルトでは、Ckeditorフィールドは必要なルールを使用して検証されません。このためのカスタムバリデーターメソッドを作成する必要があります-

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");

そして最も重要なのは、ignore配列を空白にすることです-

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

これで準備は完了です。

0
aishwarya

簡単なスニペットが私のために働いた。

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

お役に立てれば！！！

0
Rohan Khude

既存の回答は良好です。送信ボタンでのみ検証するためのソリューションを提供します。ここでは、デフォルトのjquery検証のように、ckeditorフィールドの反応検証のためのコードをいくつか示します。これを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');
}
_

ボーナス：フォームにカスタム送信ボタンとハンドラーを使用している場合は、明示的にする必要はありませんcallCKEDITOR.instances["yourtextarea"].updateElement(); ajaxを介してフォームをサーバーに送信する前。

また、呼び出すことを忘れないでください：

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

私のCKeditor：version： "4.5.4"、revision： "d4677a3" ckeditorイベントのドキュメント： http://docs.ckeditor.com/#!/api/CKEDITOR.editor 。このサイトで適切なドキュメントを見つけるのは困難でした。

0
shemanov