| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <!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="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
- <script>
- tinymce.init({
- mode: "textareas",
- setup: function(editor) {
- editor.on('change', function(e) {
- 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>TinyMCE4 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>
|
