asp.net mvc - 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 gets hidden and is preventing the field from being included in client-side validation. Is there a way I could hook into the validation to include this hidden field, or maybe a different way to hide the textarea so it gets validated before the post back?

Answer 1

I had the same issue this week. Ended up solving it with this:

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

...we also use the save plugin, but in order to get it to trigger validation, had to put this in the TinyMCE editor template:

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

(function () {

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

Update

That does make sense that the textarea isn't being unobtrusively validated while it's hidden. I forgot to add another piece of javascript I had to make this work:

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

By default, jquery validate ignores fields that are not visible. The default value for the ignore parameter is ':hidden'. By setting it to an empty string, you are telling jquery validate to not ignore hidden inputs.