<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Validate 插件 - TinyMCE 交互</title>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/demo/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
// 当改变时更新验证状态
onchange_callback: function(editor) {
tinyMCE.triggerSave();
$("#" + editor.id).valid();
}
});
$(function() {
var validator = $("#myform").submit(function() {
// 在提交验证之前更新相关的文本框
tinyMCE.triggerSave();
}).validate({
ignore: "",
rules: {
title: "required",
content: "required"
},
errorPlacement: function(label, element) {
// 在生成文本框之后定位错误标签
if (element.is("textarea")) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
}
});
validator.focusInvalid = function() {
// 当提交验证时放置焦点在 tinymce 上
if( this.settings.focusInvalid ) {
try {
var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
if (toFocus.is("textarea")) {
tinyMCE.get(toFocus.attr("id")).focus();
} else {
toFocus.filter(":visible").focus();
}
} catch(e) {
// 当聚焦在隐藏的元素上时忽略 IE 抛出的错误
}
}
}
})
</script>
</head>
<body>
<form id="myform" action="">
<h3>TinyMCE 和 Validate 插件交互实例</h3>
<label>一些其他的字段</label>
<input name="title">
<br>
<label>一些文本</label>
<textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
<br>
<input type="submit" name="save" value="提交">
</form>
</body>
</html>