validating multiple TinyMCE Editor

Question

I have a form with multiple TinyMCE editors. Some of the editors are advance and some are simple editors. I have used jquery validation plugin for validation in client-side.

Answer 1

A more generic approach is to to save the editor contents back to the textarea and then let jquery validation do it's magic in the textarea itself

tinymce.init({
    setup: function (editor) {
        editor.on('init change', function () {
            editor.save();
        });
    }
});

Because the tinymce textarea is hidden you have to also update your jquery validation code to something like this

$('#myform').validate({
    ignore: ':hidden:not(textarea)'
});

Answer 2

Instead you could use TinyMCE's isDirty() method

Ref: Here

Usage

tinyMCE.activeEditor.isDirty()

Hope this helps

Answer 3

Try

$('#submit').click(function() {

  for (i=0; i < tinymce.editors.length; i++){
    var content = tinymce.editors[i].getContent(); // get the content

    $('#description').val(content); // put it in the textarea
  }
});

or easier

$('#submit').click(function() {
     tinymce.triggerSave();
});

Answer 4

Try like that

java script code

 jQuery(document).ready(function(){
            // binds form submission and fields to the validation engine
            jQuery("#formID").validationEngine();
        });

Html code

First TinyMCE

 <textarea rows="" cols="" id="first" class="validate[required] text-input tinymce"></textarea>

Second First TinyMCE

<textarea rows="" cols="" id="second" class="validate[required] text-input tinymce"></textarea>

i also used like that, it's working fine me

Answer 5

jquery validation has two problems with tinyMCE editors in my experience. First, tinyMCE buffers content so the underlying textarea conent which jquery validation sees is not always reflective of the editor. Second, the textarea found by jquery validation is hidden several levels deep in the tinyMCE structure. When jquery validation places its error message after that textarea, the error message is hidden as well.

There are two separate jquery validation features that can resolve these issues: Normalizers: allow you to transform the contents of a field before validation Error Placement: allows you to modify where the error is displayed in the DOM. Both of these can be configured globally through the setDefaults method as such:

 jQuery.validation.setDefaults({
    normalizer:function(val){
        var ele = jQuery(this);
        if(window.tinyMCE.editors[ele.id]){
            window.tinyMCE.editors[ele.id].save();
            return window.tinyMCE.editors[ele.id].getContents();
        }
        return val;
    },
    errorPlacement:function(error,element)
    {
        var ele = jQuery(element);
        if(window.tinyMCE.editors[ele.id]){
            var realTarget = window.tinyMCE.editors[ele.id].getContainer().parent();
            error.insertAfter(realTarget);
        }
        error.insertAfter(element);
    }
});

Answer 6

f you have Html editor tinymce the required validation is not working ok, you can use this code to solve your problem, install tinymce in your application if you have more than one Htmleditor you can do this i know this is proper solution but you can do it and solve this problem

In model give the path of tinymce.cshtml page ok

  [Required(ErrorMessage = "Please enter About Company")]
  [Display(Name = "About Company : ")]
  [UIHint("tinymce_jquery_full"), AllowHtml]
  public string txtAboutCompany { get; set; }

  [Required(ErrorMessage = "Please enter About Company")]
  [Display(Name = "About Company : ")]
  [UIHint("tinymce_jquery_full"), AllowHtml]
  public string txtAboutCompany { get; set; }

Now in your view add one span like this

 <div class="divclass">
     @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
     @Html.EditorFor(model => model.txtAboutCompany)
     <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
 </div>
<div class="divclass">
     @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
     @Html.EditorFor(model => model.txtAboutCompany)
     <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
 </div>

Create jQuery on submit button click event

$("#BusinessProfile").click(function () {
    var aboutC = $("#txtAboutCompany").val()
    var pinfo = $("#txtProductinfo").val();
    if (aboutC == "" && pinfo == "") {
        $("#AC").append("").val("").html("Please enter about company")
        $("#PI").append("").val("").html("Please enter product information")
        $("#bpform").valid();
        return false;
    } else if (aboutC == "") {
        $("#PI").append("").val("").html("")
        $("#AC").append("").val("").html("Please enter about company")
        $("#txtAboutCompany").focus();
        $("#bpform").valid();
        return false;
    } else if (pinfo == "") {
        $("#AC").append("").val("").html("")
        $("#PI").append("").val("").html("Please enter product information")
        $("#txtProductinfo").focus();
        $("#bpform").valid();
        return false;
    }
    else {
        $("#AC").append("").val("").html("");
        $("#PI").append("").val("").html("");
        //return true;
        $("#bpform").validate();
    }
});

i hope your problem may be solve