使用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方法：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;