index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Validation plugin: integration with TinyMCE</title>
  6. <script src="../../lib/jquery.js"></script>
  7. <script src="../../dist/jquery.validate.js"></script>
  8. <script src="tiny_mce.js"></script>
  9. <script>
  10. tinyMCE.init({
  11. mode: "textareas",
  12. theme: "simple",
  13. // update validation status on change
  14. onchange_callback: function(editor) {
  15. tinyMCE.triggerSave();
  16. $("#" + editor.id).valid();
  17. }
  18. });
  19. $(function() {
  20. var validator = $("#myform").submit(function() {
  21. // update underlying textarea before submit validation
  22. tinyMCE.triggerSave();
  23. }).validate({
  24. ignore: "",
  25. rules: {
  26. title: "required",
  27. content: "required"
  28. },
  29. errorPlacement: function(label, element) {
  30. // position error label after generated textarea
  31. if (element.is("textarea")) {
  32. label.insertAfter(element.next());
  33. } else {
  34. label.insertAfter(element)
  35. }
  36. }
  37. });
  38. validator.focusInvalid = function() {
  39. // put focus on tinymce on submit validation
  40. if (this.settings.focusInvalid) {
  41. try {
  42. var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
  43. if (toFocus.is("textarea")) {
  44. tinyMCE.get(toFocus.attr("id")).focus();
  45. } else {
  46. toFocus.filter(":visible").focus();
  47. }
  48. } catch (e) {
  49. // ignore IE throwing errors when focusing hidden elements
  50. }
  51. }
  52. }
  53. })
  54. </script>
  55. <!-- /TinyMCE -->
  56. </head>
  57. <body>
  58. <form id="myform" action="">
  59. <h3>TinyMCE and Validation Plugin integration example</h3>
  60. <label>Some other field</label>
  61. <input name="title">
  62. <br>
  63. <label>Some richt text</label>
  64. <textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
  65. <br>
  66. <input type="submit" name="save" value="Submit">
  67. </form>
  68. </body>
  69. </html>