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

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.