jQuery TE Validation

In one of my latest projects I utilized the jQuery Validation Plugin to handle the error validation of a page. It is a popular plugin that examines all elements in a form and validates them based on rules and/or classes. For instance, you can set a class on an textbox to be "email" and it will notify the user (as they leave the element) if the data they entered has correct email syntax.

One of the fields in my page was a rich text editor (WYSIWYG) using the jQuery TE Plugin. Unfortunately, validation would not work with it because of the way it manipulates the textarea. The plugin forces users to interact with an Input DIV (a DIV that uses the contenteditable attribute), while the textarea is hidden and populated behind the scenes.

Sample HTML:
I begin by transforming the textarea into a WYSIWYG by calling the "jqte" method. I then override the default behavior of the validator plugin by including invisible elements in validation. Normally it would ignore the textarea since it can't be seen.
I then initialized my validation object so it will monitor the form. The plugin enumerates through the targeted form’s elements and detects the "required" class on my textarea. Below we also specify a custom error class (maskError) to be used for our error label. We then manage the placement of the error label. By default the validation plugin will stick the message after an element. With jQuery TE, the textarea is placed in a hidden DIV, so the error label cannot be seen if it is placed there. Since a Parent DIV surrounds the whole widget, it is better positioned after it. Next, we override the highlight and unhighlight functions so that the errorClass will also be added/removed from the widget's Parent DIV.
Next, our CSS will come into play. If our errorClass is set it will put a red border and striped background on the widget. This simply accommodates the error message.
Next, we intercept the "blur" event of the Input DIV. Here I am checking to see if the form has been submitted or not. If so then I revalidate the form each time a user leaves the WYSIWYG, which in turn, sets or removes the visual error indicators.
Lastly, we wire-up the click event of the button to submit the form. We are displaying an alert to show everything is valid. You can actually bypass that and just submit the form and it will invoke the Validator plugin.
This seemed to do the trick for me and made the WYSIWYG behave like the other form elements on the page.

See a DEMO.

Enjoy.