Использование плагина jQuery Validate с редактором TinyMCE

Question

Я выполняю проверку клиента с помощью плагина Validate для jQuery и заканчиваю полем формы, в котором используется компонент редактора TinyMCE. Это создает невероятно сложное дерево элементов управления под содержащим тегом для поля формы, включая iframe для фактической области редактирования и элемент textarea. Я не могу получить доступ к textarea напрямую, поэтому я добавляю атрибут 'required' перед вызовом .validate(), как показано ниже:

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

Однако я не получаю ошибку проверки клиента при отправке формы даже с пустым wpsm_body.

Для фона, это внутри плагина WordPress, а TinyMCE визуализируется с помощью функции wp_editor, хотя я сомневаюсь, что это слишком много.

Добавлено: Хотя я не верю, что это сильно поможет, вот HTML-код, отображаемый в браузере. HTML, сгенерированный TinyMCE после этого, имеет длину 400 строк и не имеет значения.

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

Здесь представлены только соответствующие элементы form и textarea и их атрибуты id.

Answer 1

Предполагается, что вы уже включили файл js для tinyMCE, и вы выполняете проверку на стороне клиента с помощью tinyMCE

Ниже приведен код для проверки редактора tinyMCE

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

Answer 2

Я не знаю точно, как TinyMCE используется в Wordpress.

Но я использовал TinyMCE и раньше, и textarea не обновляется, когда вы вносите изменения в редакторе форматированного текста (оно обновляется при отправке формы). Я использовал следующий код для обновления текстовой области, когда мне нужно (ajax):

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

Надеюсь, это поможет.