How to get TinyMCE and Jquery validate to work together?

Question

I am using jquery validate and the jquery version of tinymce.

I found this piece of code that makes tinymce to validate itself every time something changes in it.

Hi

I am using the jquery validate with my jquery tinymce so I have this in my code

    // update validation status on change
    onchange_callback: function (editor)
    {
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
    },

This works however there is one problem. If a user copies something from word it brings all that junk styling with it what is usually over 50,000 characters. This is way over my amount of characters a user is allowed to type in.

So my jquery validation method goes off telling me that they went over the limit. In the mean time though tinymce has cleaned up that mess and it could be possible now the user has not gone over the limit.

Yet the message is still there.

So is there a better function call I can put this in? Maybe tell tinymce to delay the valid when a paste is happening, or maybe a different callback?

Anyone got any ideas?

Answer 1

After hours of fiddling out how to get validation working with a TinyMCE editor i finally found that it is necessary to tell the validation plugin to NOT ignore hidden fields (as the original textarea is hidden when tinyMCE is initialised). So the solution in short is to:

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

This code tells the jquery Validation Plugin to check hidden fields as well... And then you can normally...

 onchange_callback: function (editor)
{
    tinyMCE.triggerSave();
    $("#" + editor.id).valid();
},

This isn't a direct answer to the original question - i know. But since this page is #1 by google for "jquery validate tinymce" i think it's a good place to mention it here.

danludwig mentioned this here: Unable to get TinyMCE working with jQuery Unobtrusive Validation

Answer 2

Oh yeah, I also faced this problem.

So, I fixed it by calling the validation on the click event of a button instead.

$("#buttontosave").click(function() {
         tinyMCE.triggerSave();
         var status;
         status = $("#myform").valid(); //Validate again
         if(status==true) { 
             //Carry on
         }
         else { }
});

This works try it.

For additional resources try

http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23941005.html