• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6382
  • Last Modified:

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

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']
            }).panelInstance('tb_Notes');
        });

...


... JQuery Validation

 $().ready(function () {
            $("#form1").validate({
                rules: {
                    tb_Notes: { maxlength: 5 }
                },
                messages: {
                    tb_Notes: "Max Characters meet."
                }
            });
        });

...

Open in new window

Links:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://nicedit.com/


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.
http://jsfiddle.net/RjNuX/3/

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) {
                $(this).text($(this).text().substr(1));
            }
            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.
Thx
0
quest_capital
Asked:
quest_capital
  • 2
1 Solution
 
Julian HansenCommented:
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

0
 
quest_capitalAuthor Commented:
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) {
                    $(this).text($(this).text().substr(1));
                    //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

0
 
quest_capitalAuthor Commented:
Found the solution.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now