在TinyMCE编辑器中使用jQuery Validate插件 [英] Using the jQuery Validate plugin with the TinyMCE editor

问题描述

我正在使用jQuery的Validate插件实现客户端验证，并简要介绍了使用TinyMCE编辑器组件的表单字段。这会在我的表单字段的包含标记下呈现一个非常复杂的控制树，包括实际编辑区域的 iframe ，以及 textarea 元素。我无法直接访问 textarea ，因此我在调用 .validate（）之前添加'required'属性，如下所示：

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."
                        }
                    });
});

然而，当我提交表单时，即使空<$ c $，也没有客户端验证错误c> wpsm_body 。

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

对于背景，这是在WordPress插件中，而TinyMCE由 wp_editor <呈现/ code>功能，虽然我怀疑这会产生太大的不同。

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.

已添加：虽然我不相信这会有所帮助最重要的是，这是呈现给浏览器的HTML。 TinyMCE在此之后生成的HTML长度为400行，并且不相关。

Added: 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>

这里唯一相关的项目是表单和 textarea ，以及他们的 id 属性。

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

推荐答案

假设您已经包含了tinyMCE的js文件，并且您正在使用 tinyMCE

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

以下是验证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>

这篇关于在TinyMCE编辑器中使用jQuery Validate插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！