Jquery validation form with TinyMCE field who gives no error by empty value

Answer 1

Your code does not work because of the fact that $("#signupForm") refers to a form that does not "contain" the editor but the editor source html lement - your textarea. Tinymce uses a html element like a textarea to get and write the editor contents to, but tinymce like most rte editors creates a contenteditable iframe to edit content.

Validation does not work cause there will be no keyup events on your textarea - those events get fired in the editor iframe (i guess validation will work if you hit the submit button (?) ).

In order to make your code work you will have to write the editorcontents back on keyup and fire/trigger a keyup event on form element (this might not work using some IE browsers).

You may do this using the tinymce setup configuration paramter. Here is an example of what to write in your tinymce init function (configuration):

theme : "advanced",
plugins: "style, paste, wordcount",
...
setup : function(ed){

    ed.onKeyUp.add(function (ed, event) {
            tinymce.triggerSave();
            $("#signupForm#message").trigger({type: 'keyup', ctrlKey: event.ctrlKey, altKey: event.altKey, which: event.keyCode, event:eventObject });
    });
},
...

Answer 2

working jsFiddle: http://jsfiddle.net/jNJ2G/1/

I used the TinyMCE jQuery plugin and created a custom rule for jquery validation

$('#message').tinymce({
                    // Location of TinyMCE script
                    script_url : 'http://www.zinomen.com/test/tiny_mce/tiny_mce.js',

                    // General options
                    theme : "advanced",
                    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                    // Theme options
                    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : true,

                    // Example content CSS (should be your site CSS)
                    content_css : "css/content.css",

                    // Drop lists for link/image/media/template dialogs
                    template_external_list_url : "lists/template_list.js",
                    external_link_list_url : "lists/link_list.js",
                    external_image_list_url : "lists/image_list.js",
                    media_external_list_url : "lists/media_list.js",
            });

$.validator.addMethod("textInMce", function textInMce(value, element){
    return $('#message').html().length > 15;
}, "Please over 15 chars.");
$.validator.classRuleSettings.textInMce= { textInMce: true };

$("#signupForm").validate({
    rules: {
        firstname: {
            required: true,
            minlength: 2
        },
        lastname: {
            required: true,
            minlength: 2
        }
    },
    messages: {
        firstname: {
            required: "Please fill in your firstname",
            minlength: "Your firstname must consist of at least 2 characters"
        },
        lastname: {
            required: "Please fill in your lastname",
            minlength: "Your lastname must consist of at least 2 characters"
        }
    }
});
if ($("#signupForm").valid())
    alert('succes');

Edit now this pastebin sample that does work :) http://pastebin.com/cDJ9033C