Jquery Validation, WYSIWYG Editor (NicEdit) Can't get the Maxlenght

Posted on 2012-09-14
Last Modified: 2012-09-23
I'm using a the NicEdit WYSIWYG Editor and it works great.
I need to do a bit of validation on that <textarea> before submit.
The way NicEdit works is that when the page is loaded it hides the <textarea> and dynamicly generated a contenteditable <div> to input your data.

However the problem is that when you type in the WYSIWYG Editor the hidden <textarea> is not in focus and not being updated dynamicly with the contenteditable <div> thus the Jquery Validation can't validate the <textarea> or contenteditable <div> to get the maxlenght.

Below is the partial code after the page is loaded:
.... Main page

<div id="testdiv" class="testdiv"></div>
<div style="width: 1383px; border-width: 0px 1px 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); overflow-y: auto; overflow-x: hidden; max-height: 83px; "><div style="width: 1375px; margin: 4px; min-height: 75px; overflow: hidden; " class=" nicEdit-main" contenteditable="true">xxxxx</div></div>
<textarea name="tb_Notes" rows="2" cols="20" id="tb_Notes" class="editor" style="height: 75px; width: 98%; display: none; ">xxxxx</textarea>


... NicEdit

 bkLib.onDomLoaded(function () {
            new nicEditor({
                maxHeight: 83,
                iconsPath: 'js/libs/niceEditor/nicEditorIcons.gif',
                buttonList: ['bold', 'italic', 'underline', 'ol', 'ul', 'indent', 'outdent', 'removeformat', 'link', 'unlink', 'image']


... JQuery Validation

 $().ready(function () {
                rules: {
                    tb_Notes: { maxlength: 5 }
                messages: {
                    tb_Notes: "Max Characters meet."


Open in new window


I have tried to dynamicly add: $(".nicEdit-main").attr('tabindex', '1');
so that I could maybe count the keypress on the contenteditable <div>, but the div want update (I tried it on other <div> that where no dynamicly generated and it works but not this one.)

The link below seems very close to what I need to do (but I don't need a counter). Since the Id is not generated I had to use the class but it does not work.

I tried this but it does not work:
var char = 60;
        $(".testdiv").append("You have <strong>" + char + "</strong> char.");
        $(".nicEdit-main").keyup(function () {
            if ($(this).text().length > char) {
            var rest = char - $(this).text().length;
            $(".testdiv").html("You have <strong>" + rest + "</strong> char.");
            if (rest <= 10) {
                $(".testdiv").css("color", "#ff7777");
            else {
                $(".testdiv").css("color", "#111111");

Open in new window

Please help any code is appreciated.
Question by:quest_capital
    LVL 50

    Expert Comment

    by:Julian Hansen
    Personally I would not try to validate with the validation library. That has been built with a specific purpose of valiating input elements and as you have stated the "typing" area is not an input area but a div.

    To write a validation routing in Javascript is dead simple
    Modify to your requirements
    $(function() {
       $('form').submit(function() {
          if ($('#id-of-div').html().length < maxvalue) {
             // if you want to stop submission at this point return false
          else {
             // if you want to stop submission at this point return false
          return true;

    Open in new window


    Accepted Solution

    I found a solution:

    I needed to add attributes on <form> onclick.
    function loadup() {
                $(".nicEdit-main").attr('id', 'nicEditmain');
                $(".nicEdit-main").attr('tabindex', '1');
                $(".nicEdit-main").attr('onkeypress', 'updateCounter(this);');

    Open in new window

    Onkeypress update a text input with the nicEdit-main <div>
    function updateCounter(textarea) {
                var limit = document.getElementById("tb_Shadow"); 
                var data = textarea.innerHTML;
                limit.value = data;
                $("#nicEditmain").keyup(function () {
                    if ($(this).text.length > char) {
                        //limit.value = limit.value.substr(1);
                    var rest = char - limit.value.length;
                    $("#span_counter").html("You have <strong>" + rest + "</strong> character left.");
                    if (rest <= 10) {
                        $("#span_counter").css("color", "#ff7777");
                    else {
                        $("#span_counter").css("color", "#111111");

    Open in new window


    Author Closing Comment

    Found the solution.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now