<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Validation plugin: integration with TinyMCE</title>
<script src="../../lib/jquery.js"></script>
<script src="../../dist/jquery.validate.js"></script>
<script src="tiny_mce.js"></script>
<script>
tinyMCE.init({
mode: "textareas",
theme: "simple",
// update validation status on change
onchange_callback: function(editor) {
tinyMCE.triggerSave();
$("#" + editor.id).valid();
}
});
$(function() {
var validator = $("#myform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
ignore: "",
rules: {
title: "required",
content: "required"
},
errorPlacement: function(label, element) {
// position error label after generated textarea
if (element.is("textarea")) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
}
});
validator.focusInvalid = function() {
// put focus on tinymce on submit validation
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) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})
</script>
<!-- /TinyMCE -->
</head>
<body>
<form id="myform" action="">
<h3>TinyMCE and Validation Plugin integration example</h3>
<label>Some other field</label>
<input name="title">
<br>
<label>Some richt text</label>
<textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
<br>
<input type="submit" name="save" value="Submit">
</form>
</body>
</html>