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