CODEWITHSUNDEEP
jquery-validatejqte
jasonwarford
jasonwarford

Reputation: 746

jQuery Validation not working with jQuery Text Editor Plugin (TextArea)

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

Upvotes: 2

Views: 4129

Answers (2)

eduardobr
eduardobr

Reputation: 145

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

Upvotes: 0

m00seDrip
m00seDrip

Reputation: 4021

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.

Upvotes: 1

Related Questions