CODEWITHSUNDEEP
jqueryvalidationtinymce
uttam
uttam

Reputation: 589

validating multiple TinyMCE Editor

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. I have been validating single TinyMCE editor by adding following code.

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

    var content = tinyMCE.activeEditor.getContent(); // get the content

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

});

But now i am supposed to validate all editors, any idea??

Upvotes: 3

Views: 13252

Answers (6)

JeffreyABecker
JeffreyABecker

Reputation: 2743

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

Upvotes: 0

Manos Pasgiannis
Manos Pasgiannis

Reputation: 1783

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

Upvotes: 5

Thariama
Thariama

Reputation: 50832

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

Upvotes: 12

JegsVala
JegsVala

Reputation: 1857

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

Upvotes: 0

thecodedeveloper.com
thecodedeveloper.com

Reputation: 3240

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

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33618

Instead you could use TinyMCE's isDirty() method

Ref: Here

Usage

tinyMCE.activeEditor.isDirty()

Hope this helps

Upvotes: -1

Related Questions