使用 tinyMCE 和漂亮的工具提示/焦点/错误指示进行 jQuery 表单验证

Question

我尝试将jQuery validation plugin 与tinyMCE 一起使用。我想做的是：

• 提交时，应验证表单。无效控件应突出显示（使用 .error CSS 类），并且工具提示应告知错误。
• 只要用户修复了错误（例如，通过输入正确的值），工具提示和 .error 突出显示就会消失。
• 每当发生错误时，表单中的第一个元素都应获得焦点。

tinyMCE / validation integration example 已经帮了我很多忙了！但是更新错误状态仍然存在问题 - 特别是对于 tinyMCE 表单。

我已经准备好运行fiddle。

更新

经过进一步调查，我发现在“成功”方法中，返回的是控件（例如 textarea）的“标签”，而不是控件本身。查看控制台输出。但我需要控制 - 任何想法如何做到这一点？这是正确的方法吗？

这里是（仅）javascript（整个示例不在此处运行）。

/// jQuery Validator Defaults
$.validator.setDefaults({
  errorPlacement: function(error, obj) {
    console.log("invalid: id   - " + obj.attr('id'));
    console.log("invalid: type - " + obj.prop('nodeName'));

    var myobj = obj;
    if (obj.is("textarea")) {
      myobj = obj.prev().contents().find('iframe');
      obj.prev().addClass('error');
    }
    myobj.attr('title', error.text());
    var errorLocation = $(".error");
    errorLocation.tooltip({
      position: {
        my: "center bottom",
        at: "center top+8"
      }
    });
  },
  success: function(obj) {
    console.log("  valid: id   - " + obj.attr('id'));
    console.log("  valid: type - " + obj.prop('nodeName'));

    var myobj = obj;
    if (obj.is("textarea")) {
      myobj = obj.prev().contents().find('iframe');
      obj.prev().removeClass('error');
    }
    myobj.removeClass("error").attr("title", "");
  },
  focusInvalid: function(obj) {
    // put focus on tinymce on submit validation
    if (obj.settings.focusInvalid) {
      try {
        var toFocus = $(obj.findLastActive() || obj.errorList.length && obj.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
      }
    }
  }
});

function initMCE() {
  $("textarea.tinymce").tinymce({
    theme: "modern",
    toolbar_items_size: "small",
    toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
    setup: function(editor) {
      editor.on("change", function(e) {
        //console.log("change event", e);
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
      });
    }
  });
}

$(function() {

  initMCE();

  var validator = $("#myform").submit(function() {
    // update underlying textarea before submit validation
    tinyMCE.triggerSave();
  }).validate({
    ignore: "",
    rules: {
      title: "required",
      someoptions: "required",
      content: "required"
    },
    messages: {
      title: "Please enter title",
      someoptions: "Please choose option",
      content: "Please enter some text"
    }
  });
});

Answer 1

好的，经过进一步的尝试和错误，我做到了:)

这里是fiddle。

如你所见，我现在使用验证插件的 highlight 和 unhighlight 方法：

/// jQuery Validator Defaults
$.validator.setDefaults({
  errorPlacement: function(error, element) {
    var myelement = element;

    if (element.is("textarea")) {
      myelement = element.prev().contents().find('iframe');
    }

    myelement.attr('title', error.text());
    var errorLocation = $(".error");
    errorLocation.tooltip({
      position: {
        my: "center bottom",
        at: "center top+8"
      }
    });
  },

  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);

    if ($(element).is("textarea")) {
      $(element).prev().addClass('error');
    }
  },

  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);

    if ($(element).is("textarea")) {
      $(element).prev().removeClass('error');
    }
  },

  success: function(element) {
    var myelement = element;
    if (element.is("textarea")) {
      myelement = element.prev().contents().find('iframe');
      //obj.prev().removeClass('error');
    }
    myelement.attr("title", "");
  }
});

function initMCE() {
  $("textarea.tinymce").tinymce({
    theme: "modern",
    toolbar_items_size: "small",
    toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
    setup: function(editor) {
      editor.on("change", function(e) {
        //console.log("change event", e);
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
      });
    }
  });
}

$(function() {

  initMCE();

  var validator = $("#myform").submit(function() {
    // update underlying textarea before submit validation
    tinyMCE.triggerSave();
  }).validate({
    debug: true,
    ignore: "",
    rules: {
      title: "required",
      someoptions: "required",
      content: "required"
    },
    messages: {
      title: "Please enter title",
      someoptions: "Please choose option",
      content: "Please enter some text"
    }
  });

  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
      }
    }
  }
});