validating multiple TinyMCE Editor

Question

I have a form with multiple TinyMCE editors. Some of the editors are advance and some are simple editors. I have used jquery validation plugin for validation in client-side.

Answer 1

jquery validation has two problems with tinyMCE editors in my experience. First, tinyMCE buffers content so the underlying textarea conent which jquery validation sees is not always reflective of the editor. Second, the textarea found by jquery validation is hidden several levels deep in the tinyMCE structure. When jquery validation places its error message after that textarea, the error message is hidden as well.

There are two separate jquery validation features that can resolve these issues: Normalizers: allow you to transform the contents of a field before validation Error Placement: allows you to modify where the error is displayed in the DOM. Both of these can be configured globally through the setDefaults method as such:

 jQuery.validation.setDefaults({
    normalizer:function(val){
        var ele = jQuery(this);
        if(window.tinyMCE.editors[ele.id]){
            window.tinyMCE.editors[ele.id].save();
            return window.tinyMCE.editors[ele.id].getContents();
        }
        return val;
    },
    errorPlacement:function(error,element)
    {
        var ele = jQuery(element);
        if(window.tinyMCE.editors[ele.id]){
            var realTarget = window.tinyMCE.editors[ele.id].getContainer().parent();
            error.insertAfter(realTarget);
        }
        error.insertAfter(element);
    }
});