Unable to get TinyMCE working with jQuery Unobtrusive Validation

Question

I\'ve got a form that\'s using unobtrusive validation and works as expected for all of my fields but once I added TinyMCE (or any other WYSIWYG editor) the textarea it uses

Answer 1

What I came up with for now is to unhide the textarea and then float it off screen. Then following what @danludwig said I trigger the save event on submit.

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

I'm also using Bootstrap so to get this fully working with jQuery Validate/Unobtrusive Validation I added in the following to the top of my page.

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

And to get the TinyMCE editor highlighted when there's an error I added this to my stylesheet.

.control-group.error table.mceLayout,
.control-group.error table.mceLayout tr.mceFirst td,
.control-group.error table.mceLayout tr.mceLast td {
    border-color: #b94a48;
}