web-dev-qa-db-ja.com

ckeditorデータがjQuery検証によって検証されない

私はこれについてたくさんの質問があることを知っていますが、私がこれを私の生涯にわたって機能させることはできません。 this 、 2番目の回答 および this を含むいくつかの解決策を試しましたが、「必須」メッセージが表示されません。フォームは、ckeditorフィールドが空の場合でも送信します。

私はドキュメント ここ を見て、エディターの内容をアラートに渡すことができますが、これを検証プラグインと統合する方法を知るのに十分な経験がありません。私はこれに多くの時間を費やしました-誰か助けてくれますか？

これが私の現在のコードで、私はフィドルを作成しました： http://jsfiddle.net/BmZ93/1/

     $('#add-job').validate({
                rules: {
                editor1: {
                    required: function() 
                    {
                    CKEDITOR.instances.editor1.updateElement();
                    }
                    }
                },
                messages: {
                Job_Title: "Required",
                Job_Location: "Required",
                jobid: "Required",
                Job_Cat: "Required",
                editor1: "Required"
                } 
        });
javascriptjqueryhtmlcssvalidation
17
surfbird0713

ここでコードを更新します

http://jsfiddle.net/rohanppatil/BmZ93/8/

$(document).ready(function() {
$('#add-job').validate({
    ignore: [],         
    rules: {
                editor1: {
                    required: function() 
                    {
                    CKEDITOR.instances.editor1.updateElement();
                    }
                    }
                },
                messages: {
                Job_Title: "Required",
                Job_Location: "Required",
                jobid: "Required",
                Job_Cat: "Required",
                editor1: "Required"
                },
                /* use below section if required to place the error*/
                errorPlacement: function(error, element) 
                {
                    if (element.attr("name") == "editor1") 
                   {
                    error.insertBefore("textarea#editor1");
                    } else {
                    error.insertBefore(element);
                    }
                }
            });
});

これがうまくいくことを願って私はJSFIDDLEでこれをテストしてうまくいきました

33
Rohan Patil

デフォルトで:hidden値を保持するignoreプロパティの値を変更する必要があります。 as CKEDITORはテキストエリアを非表示にしますjQuery検証は要素を検証しません：

ignore: []

http://jsfiddle.net/BmZ93/5/

また、requiredメソッドではブール値を返す必要がありますが、返さないことに注意してください。ここではtrueを渡すだけで十分です。

required: true

これは、CKEDITORラッパーにボーダーを追加するためにerrorPlacementメソッドも使用する更新されたコードであり、必要に応じてカスタマイズできます。

$(document).ready(function () {
    $('#add-job').validate({
        rules: {
            'editor1': {
                required: true
            }
        },
        messages: {
            Job_Title: "Required",
            Job_Location: "Required",
            jobid: "Required",
            Job_Cat: "Required",
            editor1: "Required"
        },
        errorPlacement: function(error, $elem) {
            if ($elem.is('textarea')) {
                $elem.next().css('border', '1px solid red');
            }
        },
        ignore: []
    });
});
13
undefined