2

目立たない検証を使用し、すべてのフィールドで期待どおりに機能するフォームを持っていますが、TinyMCE (またはその他の WYSIWYG エディター) を追加すると、使用するテキストエリアが非表示になり、フィールドがクライアント側の検証に含まれなくなります。 . この隠しフィールドを含めるために検証にフックする方法、またはテキストエリアを非表示にしてポストバックの前に検証される別の方法はありますか?

4

6 に答える 6

12

今週も同じ問題がありました。これでそれを解決することになった：

// sync tinymce content to validate before submitting form
$('form input[type=submit]').click(function () {
    tinyMCE.triggerSave();
});

...保存プラグインも使用しますが、検証をトリガーするには、これを TinyMCE エディター テンプレートに配置する必要がありました。

function onSavePluginCallback(ed) {
    var form = $(ed.formElement);
    var isValid = form.valid();
    if (isValid) {
        form.submit();
    }
}

(function () {

    tinyMCE.init({
        ...
        save_onsavecallback: 'onSavePluginCallback',
        ...

アップデート

テキストエリアが隠されている間、目立たないように検証されていないことは理にかなっています。この作業を行うために必要な別の JavaScript を追加するのを忘れていました。

$.validator.setDefaults({
    ignore: ''
});

デフォルトでは、jquery validate は表示されないフィールドを無視します。無視パラメータのデフォルト値は「:hidden」です。空の文字列に設定することで、隠し入力を無視しないよう jquery validate に指示します。

于 2012-06-01T23:59:09.337 に答える
3

私が今思いついたのは、 を再表示してtextareaから、画面から浮かせることです。次に、@danludwigが言ったことに従って、送信時に保存イベントをトリガーします。

$(function () {
    var tinymce = $('#Content');
    tinymce.tinymce({
        setup: function (e) {
            e.onInit.add(function () {
                tinymce.css({
                    position: 'absolute',
                    height: 0,
                    width: 0,
                    top: -100
                }).show();
            });
        }
    });

    $('form input[type=submit]').click(function () {
        tinyMCE.triggerSave();
    });
});

私はBootstrapも使用しているので、これを jQuery Validate/Unobtrusive Validation で完全に機能させるために、ページの上部に次のように追加しました。

// makes form field highlighting work with bootstrap's css
$.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error');
    }

});
$(function () {
    // makes form field highlighting work with bootstrap's css on post backs
    $('.input-validation-error').each(function (i, element) {
        $(element).closest('.control-group').not('.error').addClass('error');
    });
});

そして、エラーが発生したときに TinyMCE エディターを強調表示するために、これをスタイルシートに追加しました。

.control-group.error table.mceLayout,
.control-group.error table.mceLayout tr.mceFirst td,
.control-group.error table.mceLayout tr.mceLast td {
    border-color: #b94a48;
}
于 2012-06-02T06:01:56.057 に答える
1

これは私のために働いた...

    $(function () {
        var myForm = $('#MyFormId');

        $.data(myForm[0], 'validator').settings.ignore = "null";

        tinymce.init({
            selector: '.MyTextareaClass',
            height: 200,
            setup: function (editor) {
                editor.on('keyUp', function () {
                    tinyMCE.triggerSave();

                    if (!$.isEmptyObject(myForm.validate().submitted))
                        myForm.validate().form();
                });
            },
            relative_urls: false,
            theme: "modern",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "template paste"
            ],
            paste_as_text: true,
            toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview"
        });
    });
于 2015-02-21T11:23:06.653 に答える
1

このソリューションと他のいくつかの同様のソリューションを試しましたが、どれも機能させることができませんでした。これが代わりに思いついたものです。それは完璧な解決策ではありませんが、私が必要としていた仕事をします. ページに他のコードを追加しませんでした。 

$('form button[type=submit]').not('.cancel').click(function () {
  var form = $('#FormName');
  var isValid = form.valid();
  var istinymceValid = $('#ContentField').valid();
  if (!isValid || !istinymceValid) {
    return false;
  }
  return true;
});
于 2014-09-17T17:14:05.260 に答える