Fmpq教程在线工具 - Fmpq教程实例

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery 插件: 使用 TinyMCE 进行交互</title>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://www.fmpq.com/jscss/jquery/jquery-validation-1.14.0/jquery.validate.min.js"></script>
	<script src="http://www.fmpq.com/jscss/jquery/jquery-validation-1.14.0/messages_zh.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/demo/tinymce/tiny_mce.js"></script>
	<script>
	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>