javascript - CKEditor を使用した jQuery 検証プラグイン

Question

この質問が以前に尋ねられたことを知っており、以前の質問をすべて読みましたが、jQuery バリデーターで CKEditor フィールドを適切に検証できません。

私のフォームは以下です：

<form id="faq-form">
    <p>
        <label>Title:</label>
        <input type="text" id="faq-title" name="faq-title" class="faq-title" />
    </p>
    <p>
        <label for="question">Question:</label>
        <textarea name="question" id="question"></textarea>
    </p>
    <p>
        <label for="answer">Answer:</label>
        <textarea name="answer" id="answer"></textarea>
    </p>            
    <p>
        <input id="submit-faq" name="submit-faq" type="submit" value="Submit" />
    </p>
</form>

両方のテキストエリアは、以下を使用して CKEditor フィールドに変換されます。

<script>
CKEDITOR.replace('question', { toolbar : 'forum' });
CKEDITOR.replace('answer', { toolbar : 'forum' });
</script>

検証しようとすると、タイトルフィールドのみが検証されます。何が間違っているのかわかりません。これが検証用の私のjavascriptコードです（以下はjQueryドキュメント対応関数にあります）。

$('#faq-form').submit(function() {
    // Update textareas with ckeditor content
    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
        $.trim($('#' + i).val());
    }

    // Validate the form
    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;
    }

検証が完了したら、通常のフォームの get または post の代わりに $.post メソッドを使用して、リロードせずにページを更新できるようにします。$.post は検証メソッドの後にありますが、表示する必要はないと思いました。

score 6 · Accepted Answer

私はついにそれを機能させることができました。CKEditor は実行時にテキストエリアを非表示にし、jQuery バリデーターは非表示の要素を無視します。検証機能では、これを変更できます。だから私の新しいコードは以下の通りです：

if ( ! $('#faq-form').validate({
    ignore: "input:hidden:not(input:hidden.required)",
    rules: {
        'faq-title': {
            required: true,
            minlength: 5
        },
        answer: {
            required: true,
            minlength: 20
        },
        question: {
            required: true,
            minlength: 20
        }
    },
    messages: {
        'faq-title': {
            required: "The title field is required"
        },
        answer: {
            required: "The answer field is required"
        },
        question: {
            required: "The question field is required."
        }
    },
    errorElement: "span",
    errorPlacement: function (error, element) {
        error.appendTo(element.prev());
    }
}).form()) {
    console.log('Form errors');
    return false;
}

また、メッセージを追加し、エラーが表示されるときの要素と場所を変更しました。これに出くわした他の人に役立つかもしれないと思いました.

score 1 · Accepted Answer

CKEditor の上に表示されるたびに、または見栄えの悪いラベルの直後に表示されるため、適切な場所に CKEditor のエラーメッセージを表示するのに何時間も費やしました。

CKEditor はテキストエリアを非表示にし、そのスパンタグをテキストエリアの直後に配置します。ブラウザーツールを使用して dom 要素を調べると、テキスト領域が非表示になっていることがわかります。

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 の ID であり、ckeditor の cke_msgText ID です。id は dom 要素を調べることで見つけることができます。おそらく、ckeditor は textarea の id 属性を取得し、接頭辞「cke_」を付けます。

score 0 · Accepted Answer

私の推測では、少なくともデフォルトでは、CKEditorは検証でうまく機能しません。検証前にエディターを削除する必要があります（CKEditorは、編集中のものを非表示にしてからiframeを挿入し、そこに編集可能なコンテンツを貼り付けることで機能します。エディターを削除すると、iframeがシャットダウンされ、コンテンツがコピーされます。少なくともそれはメモリからです）。私の推測では、DOMを調べると、textareasのコンテンツが変更されていないことがわかります。

このコンテキストでは、NicEditの方が便利な場合があります。次のスレッドを参照してください。

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

score 0 · Accepted Answer

あなたのコード:

$('#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()メソッドです。ルールとオプションを使用して、DOMでプラグインを一度初期化.validate()するためにのみ使用されます。初期化すると、条件内で使用してテストをトリガーし、ブール値を返すことができます。.valid()

また、 handler.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;
    }

});

score 0 · Accepted Answer

これまでに見つけたシンプルでエレガントな最良のソリューション：

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

フォント: http://devlog.waltercruz.com/usando-ckeditor-e-jquery-validate-juntos

score 0 · Accepted Answer

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

javascript - CKEditor を使用した jQuery 検証プラグイン

6 に答える 6

Related

Reference