2

I am working with the jQuery TE plugin (http://jqueryte.com/). It does not seem to work with the jQuery Validation plugin.

A regular textarea works fine but if I want to transform it into a jqte WYSIWYG I lose that functionality.

In this example the Name and Bio fields are validated, but not the Resume field.

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();
jasonwarford
  • 746
  • 5
  • 11

2 Answers2

1

I have detailed an example of this in a blog post: http://chadkuehn.com/jquery-te-validation/

When you place a jqte on a TEXTAREA tag it hides the original element. So in the validation plugin you must adjust the markup that's visible when highlighting and unhighlighting. You must also do some adjusting to the placement of the error label.

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

View a DEMO here.

2Yootz
  • 3,971
  • 1
  • 36
  • 31
0

Using ASP.NET MVC I would recommend this... To have jQuery validation automatically with jqte, execute at startup:

$('.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');
});

And remember to put "textarea-editor" class in the textarea

eduardobr
  • 146
  • 15