123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!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>
|