76342

Using the jQuery Validate plugin with the TinyMCE editor

I am implementing client validation using the Validate plugin for jQuery, and coming short with a form field that uses the TinyMCE editor component. This renders an incredibly complex control tree under the containing tag for my form field, including an iframe for the actual editing area, and a textarea element. I cannot access the textarea directly, so I add the 'required' attribute before calling .validate(), like below:

jQuery(function() { jQuery("#wpsm_body").addClass("required"); jQuery("#wpsm-send-mail") .validate( { errorContainer : "#wpsm-top-error-container, #wpsm-bottom-error-container", errorLabelContainer : "#wpsm-top-error-container ul", wrapper : "li", messages : { wpsm_from : "The message has no 'From' address. The administrator can set a default for this on the SuperMail 'Settings' page.", wpsm_subject : "The message has no subject.", wpsm_body : "The message has no body.", wpsm_text : "The message has no body." } }); });

However, I get no client validation error when I submit the form even with an empty wpsm_body.

For background, this is inside a WordPress plugin, and TinyMCE is rendered by the wp_editor function, although I doubt this makes too much difference.

<strong>Added:</strong> While I don't believe this will help much at all, here is the HTML rendered to the browser. The HTML generated by TinyMCE subsequent to this is 400 lines long, and not relevant.

<form id="wpsm-send-mail" action="theform.php" method="POST" enctype="multipart/form-data"> <div id="wp-wpsm_body-wrap" class="wp-editor-wrap tmce-active"> <link rel='stylesheet' id='editor-buttons-css' href='http://localhost/wordpress/wp-includes/css/editor-buttons.dev.css?ver=20111114' type='text/css' media='all' /> <div id="wp-wpsm_body-editor-tools" class="wp-editor-tools"> <a id="wpsm_body-html" class="hide-if-no-js wp-switch-editor switch-html" onclick="switchEditors.switchto(this);"> HTML</a> <a id="wpsm_body-tmce" class="hide-if-no-js wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</a> <div id="wp-wpsm_body-media-buttons" class="hide-if-no-js wp-media-buttons"> <a href="http://localhost/wordpress/wp-admin/media-upload.php?post_id=0&#038;TB_iframe=1" class="thickbox add_media" id="wpsm_body-add_media" title="Add Media" onclick="return false;"> Upload/Insert <img src="http://localhost/wordpress/wp-admin/images/media-button.png?ver=20111005" width="15" height="15" /></a></div> </div> <div id="wp-wpsm_body-editor-container" class="wp-editor-container"> <textarea class="wp-editor-area" rows="20" cols="40" name="wpsm_body" id="wpsm_body"></textarea></div> </div> </form>

The only relevant items here are the form and textarea, and their id attributes.

Answer1:

Assuming You have already included the js file for tinyMCE and you are doing the validation on client side using tinyMCE

Following is the code to validate the tinyMCE editor

<script> $(document).ready(function () { var $btn = $("#<%=btnSubmit.ClientID %>"); var $txtEditor = $(".txtEditor"); $btn.click(function () { if (tinyMCE.get($txtEditor.attr("id")).getContent() == "") { alert("hi"); } else { alert("bye"); } return false; }) }); </script> <div> <asp:TextBox id="TextBox1" runat="server" TextMode="MultiLine" CssClass="txtEditor212"></asp:TextBox> <asp:TextBox id="txtEditor" runat="server" TextMode="MultiLine" CssClass="txtEditor"></asp:TextBox> </div> <div> <asp:Button id="btnSubmit" runat="server" Text="Save" onclick="btnSubmit_Click" /> </div> </asp:Content> </div>

Answer2:

I don't know exactly how TinyMCE is used in Wordpress.

But I've used TinyMCE before, and the textarea doesn't get updated as you make edits in the rich text editor (it does get updated on form submit). I used the following code to update the textarea when I needed to (ajax):

form.find('textarea.rich').each(function() { var textarea = $(this); var taeditor = tinyMCE.get(textarea.attr('id')); if (taeditor) textarea.val(taeditor.getContent()); });

Hope this helps.

Recommend

  • How to include ag-grid styles for Angular 5?
  • gridview rendered in div
  • Moved coordinates of the scene when DOM element with renderer is not at the top of the screen
  • When are the auto-generated columns in a gridview added?
  • React JS 'this' not working as expected
  • JSF binding with setValueExpression read-only?
  • How to display international scripts in QLabels?
  • Can I plot times when they're given as UNIX timestamps with added milliseconds?
  • Anybody have any idea how the divs are emitted in pinterest.com?
  • Wordpress and Drupal SSO/Single Sign On
  • wordpress query - next two events by metadata date
  • Setting color in a row of a Jtable
  • Conditional render in tagfile depending on whether the attribute is specified or not
  • IIS 7.5 404 Error for .PDF files
  • Whats the best way of persisting data to Isolated Storage on Windows Phone 7?
  • Zeromq with python hangs if connecting to invalid socket
  • Issue with routerLink directive
  • how do i write assembly code from c#?
  • Button click event not firing in jQuery
  • How can I speed up CURL tasks?
  • zope_i18n_compile_mo_files doesn't work on a Zeo configuration
  • OOP Javascript - Is “get property” method necessary?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Jackson Parser: ignore deserializing for type mismatch
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JSON response opens as a file, but I can't access it with JavaScript
  • Play WS (2.2.1): post/put large request
  • How to use remove-erase idiom for removing empty vectors in a vector?
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Scrapy recursive link crawler
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Why is an OPTIONS request sent to the server?
  • req.body is undefined - nodejs
  • Cassandra Data Model
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Getting Messege Twice Using IMvxMessenger
  • How to Embed XSL into XML
  • Python/Django TangoWithDjango Models and Databases