working validation hint, working word counter but not working together

Posted by Sriyani Rathnayaka on Stack Overflow See other posts from Stack Overflow or by Sriyani Rathnayaka
Published on 2012-12-16T04:15:45Z Indexed on 2012/12/16 5:04 UTC
Read the original article Hit count: 208

Filed under:

I added a word counter to a my form's textarea... it is something like this...

<div>
  <label>About you:</label>
  <textarea id="qualification" class="textarea hint_needed" rows="4" cols="30" ></textarea>                     
  <span class="hint">explain about you</span>
  <script type="text/javascript">
    $("textarea").textareaCounter();
  </script>
</div>

My problem is when I add textaracounter() like this my validation hint is not working.. when I remover the counter function validation hint is working...

this is the jquery for hint message..

$(".hint").css({ "display":"none" });
$("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
$(this).next(".hint").css({ "display":"inline" });
}).on("mouseleave", function() {
$(this).next(".hint").css({ "display":"none" });
});

this is for the word counter..

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $("#experience");
            obj.after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if(wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

can anybody tell me what is the problem there?

Thank you..

© Stack Overflow or respective owner

Related posts about jQuery