我正在使用jQuery的Validate插件实现客户端验证,并且简短地介绍了使用TinyMCE编辑器组件的表单字段。这在我的表单字段的包含标记下呈现了令人难以置信的复杂控制树,其中包括用于实际编辑区域的iframe
以及textarea
元素。我不能直接访问的textarea
,所以我打电话.validate()
前添加“必要”的属性,如下图所示:在TinyMCE编辑器中使用jQuery 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。 TinyMCE在此之后生成的HTML长度为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&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
属性。
一些HTML将是很好的代码 – ori 2012-01-11 08:43:00
@ori,看我的编辑。我已经添加了可以添加的HTML。 – ProfK 2012-01-11 09:40:22