TinyMCE with jQuery validation plugin

Question

I am trying to use the jQuery validation plugin with tinyMce but I am having a small problem.

By default the validation plugin has the following behavior: initially every field is marked as valid and the validation is lazy ie the error isn't shown until the user enters a value and moves away from the field. Once a field is marked as invalid, it is eagerly validated which means the validation is done on every key stroke.

I am having difficulty simulating this behavior for the TinyMCE field. If I use the onChange method the validation is always done on focus out. If I use the onKeyDown method, validation is done on every key stroke, even if the user is changing the field for the first time.

Is there some way I can use a combination of onChange and onKeyDown in order to mimic the default behavior of jQuery validation plugin? Here is the code that I currently have:

function(ed) {
    ed.onChange.add(function(ed, e) {
        tinyMCE.triggerSave();
        jQuery('#'+ed.id).valid();
    });
}

In case I am not making sense you can read how the validation plugin behaves here .

Thanks in advance!

Answer 1

I think you're going to have to have a valid state variable

Something like this

function(ed) {
    var validState = true;

    ed.onKeyDown.add(function(ed, e) {
        if (validState) {
            return
        }
        else {
            // check if new content is valid
            validState = jQuery('#'+ed.id).valid();
        }
    }

    ed.onChange.add(function(ed, e) {
        validState = jQuery('#'+ed.id).valid();

        if (validState){
            tinyMCE.triggerSave();
        }

    });
}

Note this is just some sample code. I haven't verified that this will work