working validation hint, working word counter but not working together
<p>I added a word counter to a my form's textarea... it is something like this...</p>

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

<p>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...</p>

<p>this is the jquery for hint message..</p>

<pre><code>$(".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" });
});
</code></pre>

<p>this is for the word counter..</p>

<pre><code>(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('&lt;span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text"&gt;Max. '+options.limit+' words&lt;/span&gt;');

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

<p>can anybody tell me what is the problem there?</p>

<p>Thank you..</p>
