<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<title>jQuery Validation plugin: integration with TinyMCE</title>
|
|
<script type="text/javascript" src="../../lib/jquery.js"></script>
|
<script type="text/javascript" src="../../jquery.validate.js"></script>
|
<script type="text/javascript" src="tiny_mce.js"></script>
|
<script type="text/javascript">
|
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>
|
