jQuery 验证不适用于 jQuery 文本编辑器插件 (TextArea)答案

【问题标题】：jQuery Validation not working with jQuery Text Editor Plugin (TextArea)jQuery 验证不适用于 jQuery 文本编辑器插件 (TextArea)
【发布时间】：2014-06-06 17:25:55
【问题描述】：

我正在使用 jQuery TE 插件 (http://jqueryte.com/)。它似乎不适用于 jQuery Validation 插件。

常规文本区域可以正常工作，但如果我想将其转换为 jqte WYSIWYG，我将失去该功能。

在此示例中，验证了姓名和简历字段，但未验证简历字段。

jsFiddle

HTML：

<form id="frmExample">
<div><b>Name:</b></div>
<input name="txtName" id="txtName" class="required" />
<br />
<div><b>Bio:</b></div>
<textarea cols="40" rows="6" name="txtBio" id="txtBio" class="required"></textarea>
<br />
<div><b>Resume</b></div>
<textarea name="txtResume" class="required" id="txtResume"></textarea>
<br />
<br />
<input type="submit" value="Save" />

JS：

$("#txtResume").jqte();
$("#frmExample").validate();

【问题讨论】：

标签： jquery-validate jqte

【解决方案1】：

我在一篇博文中详细介绍了这方面的一个例子：http://chadkuehn.com/jquery-te-validation/

当您在 TEXTAREA 标签上放置 jqte 时，它会隐藏原始元素。因此，在验证插件中，您必须调整突出显示和取消突出显示时可见的标记。您还必须对错误标签的位置进行一些调整。

 errorPlacement: function (error, element) {
      var el = $(element).closest(".jqte");
      if (el.length == 1) {
          error.insertAfter(el);
      } else {
          error.insertAfter(element);
      }
  },
  highlight: function (element, errorClass, validClass) {
      $(element).addClass(errorClass).removeClass(validClass);

      var el = $(element).closest(".jqte");
      if (el.length == 1) {
          el.addClass(errorClass);
      }
  },
  unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass(errorClass).addClass(validClass);
      var el = $(element).closest(".jqte");
      if (el.length == 1) {
          el.removeClass(errorClass);
      }
  }

在此处查看DEMO。

【讨论】：

【解决方案2】：

使用 ASP.NET MVC 我会推荐这个... 要使用 jqte 自动进行 jQuery 验证，请在启动时执行：

$('.jqte_editor').change(function () {
    if ($(this).parent().siblings('.textarea-editor').hasClass('.input-validation-error'))
        $(this).parent().addClass('input-validation-error');
    else
        $(this).parent().removeClass('input-validation-error');
});

$('form').bind('submit', function () {
    $('.textarea-editor.input-validation-error').parent().parent().addClass('input-validation-error');
    $('.textarea-editor:not(.input-validation-error)').parent().parent().removeClass('input-validation-error');
});

记得把“textarea-editor”类放在textarea中

【讨论】：