jQuery validation and TinyMCE

By Rebecca | January 12, 2009

categories: howto, jquery

Just solved a problem where the jQuery validation plugin wasn't playing so nicely with TinyMCE -- the validation plugin was trying to validate the textarea before TinyMCE had a chance to copy the editor contents back to the textarea. I was about to yank TinyMCE out of the page but a little reading through the TinyMCE docs led me to try this:

 
$('#mySubmitButton').click(function() {
    var content = tinyMCE.activeEditor.getContent(); // get the content
    $('#myTextarea').val(content); // put it in the textarea
});
 
$('#myForm').validate();
 

And what do you know, it works. One note: it's important to bind the content replacement to the click event of the submit button, not to the actual form submission, or else the validation may try to run before the content gets copied back to the textarea.

15 Comments »

15 Responses to “jQuery validation and TinyMCE”

  1. Justin Yost says:
    January 13th, 2009 at 1:19 am

    Thanks for the tip.

  2. Oliv. says:
    February 23rd, 2009 at 12:47 pm

    your tip has been usefull to me for sending via ajax the content of the textarea,
    thanks for writing this clear page !

  3. Bill says:
    March 11th, 2009 at 9:19 pm

    Hi Rebecca,

    Thank you for posting this! I just spent about an hour trying to figure this out and *almost yanked TinyMCE, too :p

  4. Rui says:
    March 18th, 2009 at 10:58 am

    Thank you…
    Great tip! Worked nicelly.

  5. Paul says:
    May 11th, 2009 at 12:40 pm

    Nice work, I spent a while trying to debug this. Now I can have my TinyMCE and use it too.

  6. Paul says:
    May 11th, 2009 at 1:13 pm

    Follow-up – I have a page with several TinyMCE text areas on it. This also works. TinyMCE also supplies a get content by TinyMCE ID method (which is always the name attribute I think) and it will also work:

    $(’.submit’).click(function() {
    var content = tinyMCE.get(’myContent’).getContent(); // get the content
    $(’#myContentId’).val(content); // put it in the textarea
    });

    You could also use this with the jQuery .each method to update an array of TinyMCE textareas.

  7. yann lorber says:
    May 27th, 2009 at 5:31 am

    Very good, works perfect !

  8. steve chan says:
    June 5th, 2009 at 1:44 pm

    A thanks a trillion! Nice little snippet will come in handy

  9. Rajesh says:
    June 8th, 2009 at 6:38 am

    Hi, Thanks a lot for the fix.

  10. Joel "Jaykul" Bennett says:
    June 11th, 2009 at 10:56 am

    You really should just use tinyMCE.triggerSave()

  11. Joel "Jaykul" Bennett says:
    June 11th, 2009 at 8:05 pm

    Here’s what we did … after you include the tinyMCE script and jquery.validate … you have another scriptblock where you init tinyMCE and the validator like so:

    tinyMCE.init({
    // whatever ….
    });
    $(document).ready(function() {
    $(”input[type='submit']“).click(function() {
    tinyMCE.triggerSave();
    });

    // validate signup form on keyup and submit
    $(”#editEntryForm”).validate({
    // whatever …
    });
    });

    Of course, that’s still not perfect, because it only works on clicks of the button. Really, the jquery.validate script needs to take a prevalidation script block to handle situations like this…

  12. Tunde says:
    June 25th, 2009 at 10:05 am

    Thanks a million, have been battling this problem for a while now.

  13. saran says:
    August 24th, 2009 at 1:52 am

    hi,
    its working well.. thanks lot..
    if any one doubt on it.. go through it.

    $(document).ready(function(){
    $(’#submit_curriculum’).click(function(){
    var content = tinyMCE.activeEditor.getContent();
    $(’#curriculum_description’).val(content);
    $(”#curriculum”).validate();
    });

    Thanks
    saran

  14. arthur says:
    November 18th, 2009 at 9:19 pm

    Thank you – I’ve spent hours trying to figure out why the simple textarea could not be accessed via JQuery – then realized that using TinyMCE hid the value. Your blog entry was very useful.

  15. BBonifield says:
    January 7th, 2010 at 1:17 pm

    Hey Rebecca. I ran into this problem today myself, and low and behold, you’re the #1 result for ‘jquery.validate tinymce’ (wtg!). I was a little against it due to some issues specific to our project, but I was going to go ahead anyway. Well, until I began thinking about how the .click handler won’t account for instances where the user just presses enter in the form. I looked at the next few Google results and ran across http://is.gd/5RK8u on the jquery.validate site. It seems to be a cleaner and more reliable way to handle the situation.

    The only thing I might add to that is checking the parent form’s validate() options to see whether or not you should trigger the .valid() call on blur. Something like…

    tinyMCE.init({
    mode : “textareas”,
    theme : “simple”,
    // update validation status on change
    onchange_callback: function(editor) {
    tinyMCE.triggerSave();
    var $editor = $(”#” + editor.id);
    if ($editor.closest(’form’).data(’validator’).settings.onfocusout !== false) {
    $editor.valid();
    }
    }
    });

Comment