2

私はこれを理解しようとして髪を引っ張ってきました。

現在、jquery 検証プラグインを使用して jquery 2.2.2 を実行しています。https://jqueryvalidation.org/ および Trumbowyg WYSIWYG エディター。https://alex-d.github.io/Trumbowyg/

ほとんどすべてが機能しますが、実際にクリックしたり何かを実行したりするたびに、それは素晴らしいことです。コンソール エラーが発生しますUncaught TypeError: Cannot read property 'nodeName' of undefined。また、Trumbowyg の特定の部分が正しく機能しないようにします。

したがって、私の解決策は、jquery 検証プラグインで無視クラスを使用することでした。しかし、うまくいきません。さまざまなフィールドのほとんどすべてのクラスのラベル付けを無視しようとしましたが、何をしても無視されることはありません。

では、trumbowyg テキスト エディタで jquery 検証プラグインを使用するにはどうすればよいでしょうか。

これが私の検証コードです。

$('form').validate({
    errorPlacement: function (error, element) {
        if ($(element).parent('.input-group').length) {
            error.insertAfter(element.parent().siblings('label'));
            error.addClass('alert alert-danger validate');
        } else {
            error.insertAfter(element.siblings('label'));
            error.addClass('alert alert-danger validate');
        }
    },
    errorElement: 'div',
    highlight: function (element) {
        $(element).parent().addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).parent().removeClass("has-error");
    },
    ignore: '.advanced',
    rules: {
        password_confirm: {
            equalTo: 'input[name=password]'
        },
        user_username: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        },
        nav_name: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        }
    },
    messages: {
        password_confirm: {
            equalTo: "Passwords must match"
        },
        user_username: {
            remote: "This Username already exists"
        },
        nav_name: {
            remote: "This Nav Item Name already exists"
        }
    },
    submitHandler: function (form) {
        $('button[type="submit"]').addClass('disabled').prop('disabled', true).prepend('<span class="bootstrap-dialog-button-icon glyphicon glyphicon-asterisk icon-spin"></span>');
        form.submit();
    }
});

検証プラグインを削除しましたが、trumbowyg のすべてが機能しました。そのため、新しい検証プラグインを見つける時が来たのかもしれませんが、それは避けたいと思います。

更新: Firefox で別のエラーが発生していることに気付いたので、それも共有したいと思います。

TypeError: owner is undefined
owner[ this.expando ] && owner[ this.expando ][ key ];

問題の例は、http: //develop.chrischampeau.com/admin/test.phpでデモできるはずです。

4

1 に答える 1

4

これは、 jQuery Validationプラグインの既知の問題であり、イベントがトリガーされたときに、フォーム内のコンテンツの編集可能な要素によって例外が発生します。

この問題は、まったく同じ問題を説明しています。

  • あなたのWYSIWYGを壊します。
  • 未定義のエラー。
  • WYSIWYG のすべてのツールバー ボタンは、2 回のクリックでトリガーされます。

このスレッドでは、この問題を解決するための変更/ハックが提案されていますが、この同じ問題を修正するプル リクエストが 5 月にプロジェクトに既にマージされています。

問題は、最新のリリースが 2 月のものであるため、このマージは現在利用できないことです。この他の問題によると、メンテナーは 15 時間前に、リリースがまもなく行われ、問題の修正が含まれていると述べました。

新しいリリースが待ちきれない場合は、いつでもリポジトリから最新バージョンを入手するか、このプル リクエストに含まれる修正を自分で選ぶことができます。

プルリクエストからの修正を適用した後にコメントで説明した2番目の問題に関して、設定で指定されたクラスがあるかどうかを確認することにより、要素を無視する必要があるかどうかをjQuery Validationがさまざまなイベント(onfocusout特にこの場合)で確認します。

それを無視するためにテキストエリアに追加していますがclass="advanced"、残念ながら、Trumbowygが初期化されると、作成されるラッパーは次のようになります。

<div class="trumbowyg-editor trumbowyg-reset-css" contenteditable="true" dir="ltr" placeholder="">

advancedクラスをラッパーに伝搬しません。Trumbowygの初期化時にこのクラスを自分で追加することで解決できる可能性があります。tbwinitこれを行うには、コンストラクターを変更してイベントに依存できます。

// Setup WYSIWYG
$('textarea.advanced').trumbowyg( {
    resetCss: true,
    removeformatPasted: true,
    autogrow: true,
    btnsDef: {
    // Customizables dropdowns
        image: {
            dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'],
            ico: 'insertImage'
        }
    },
    btns: [
        ['viewHTML'],
        ['undo', 'redo'],
        ['formatting'],
        'btnGrp-design',
        ['link'],
        ['image'],
        'btnGrp-justify',
        'btnGrp-lists',
        ['foreColor', 'backColor'],
        ['preformatted'],
        ['horizontalRule'],
        ['fullscreen']
    ],
    plugins: {
        // Add imagur parameters to upload plugin
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID 9e57cb1c4791cea'
            },
            urlPropertyName: 'data.link'
        }
    }
}).on('tbwinit', function(){
  $('.trumbowyg-editor').addClass('advanced');
});

初期化後、ラッパーはadvancedクラスを持ち、 jQuery Validationがそれを使用できるようになります。

<div class="trumbowyg-editor trumbowyg-reset-css advanced" contenteditable="true" dir="ltr" placeholder="">

2番目の問題に関しては、Trumbowygのような一部のライブラリがポップアップを開いたときにトリガーされます(コメントで言及されているもののように: Insert LinkInsert Imageなど)、実際<form>にはDOMに a を追加していますが、別の<form>リードの中に追加していますネストされたフォームに。

ネストされたフォームの場合、言及した 2 番目のエラーは jQuery Validation によってトリガーされます。このメッセージに関するこの問題に関するjQuery Validationプラグイン所有者のコメントを確認できます。

フォームのネストは無効な HTML です。[...] プラグインは、既にフォームがある場合にフォームを生成しないか、現在のフォームの外に追加する必要があります。

この問題に関してTrumbowyg Githubで既に公開されている問題がありますが、これはプラグインのコアに大きな変更が加えられており、現時点では 2015 年からマイルストーンからマイルストーンに移動されています。

于 2016-07-14T10:57:32.950 に答える