javascript - jquery validate with a character counter plugin -
i have page has fields validated using jquery-validate plugin, , wanted include twitter character counter on fields see how many chars left
here demo http://jsfiddle.net/4k1vokgv/1/
$(document).ready(function() { $(".counter").charactercounter({ countercssclass: 'text-counter', limit: 1000, counterformat: 'characters remaining: %1', }); var validatorstrat = $("#strategyform").validate({ rules:{ exampleinputemail1: { required: true, }, zb_note: { required: true, maxlength: 140, }, zc_note: { required: true, maxlength: 140, }, }, submithandler: function(form) {} }); }); both character counters work fine until issue, when jquery-validate fires validation error (required, maxlength, etc), character counter stops working on element has error.
i not believe issue character counter plugin itself. think error generation jquery validate somehow causes this.
anyways, included full snippet below, appreciated
/** * character counter v1.0 * ====================== * * character counter simple, twitter style character counter. * * https://github.com/dtisgodsson/jquery-character-counter * * @author darren taylor * @author email: shout@darrenonthe.net * @author twitter: darrentaytay * @author website: http://darrenonthe.net * */ (function($) { $.fn.charactercounter = function(options){ var defaults = { exceeded: false, limit: 150, counterwrapper: 'span', countercssclass: 'help-block', counterformat: '%1', counterexceededcssclass: 'exceeded', onexceed: function(count) {}, ondeceed: function(count) {}, customfields: {}, }; var options = $.extend(defaults, options); return this.each(function() { $(this).after(generatecounter()); bindevents(this); checkcount(this); }); function customfields(params) { var html=''; (var in params) { html += ' ' + + '="' + params[i] + '"'; } return html; } function generatecounter() { var classstring = options.countercssclass; if(options.customfields.class) { classstring += " " + options.customfields.class; delete options.customfields['class']; } return '<'+ options.counterwrapper +customfields(options.customfields)+' class="' + classstring + '"></'+ options.counterwrapper +'>'; } function rendertext(count) { return options.counterformat.replace(/%1/, count); } function checkcount(element) { var charactercount = $(element).val().length; var remaining = options.limit - charactercount; if( remaining < 0 ) { $(element).next("." + options.countercssclass).addclass(options.counterexceededcssclass); options.exceeded = true; options.onexceed(charactercount); } else { if(options.exceeded) { $(element).next("." + options.countercssclass).removeclass(options.counterexceededcssclass); options.ondeceed(charactercount); options.exceeded = false; } } $(element).next("." + options.countercssclass).html(rendertext(remaining)); }; function bindevents(element) { $(element) .bind("keyup", function () { checkcount(element); }) .bind("paste", function () { var self = this; settimeout(function () { checkcount(self); }, 0); }); } }; })(jquery); $.validator.setdefaults({ errorelement: "span", errorclass: "help-block", // validclass: 'stay', highlight: function (element, errorclass, validclass) { $(element).addclass(errorclass); //.removeclass(errorclass); $(element).closest('.form-group').removeclass('has-success').addclass('has-error'); }, unhighlight: function (element, errorclass, validclass) { $(element).removeclass(errorclass); //.addclass(validclass); $(element).closest('.form-group').removeclass('has-error').addclass('has-success'); }, errorplacement: function(error, element) { if(element.parent('.input-group').length) { error.insertafter(element.parent()); } else if (element.hasclass('select2')) { error.insertafter(element.next('span')); } else { error.insertafter(element); } } }); $(document).ready(function() { $(".counter").charactercounter({ countercssclass: 'text-counter', limit: 140, counterformat: 'characters remaining: %1', }); var validatorstrat = $("#strategyform").validate({ rules:{ exampleinputemail1: { required: true, }, zb_note: { required: true, maxlength: 1000, }, zc_note: { required: true, maxlength: 1000, }, }, submithandler: function(form) {} }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <form role="form" id="strategyform"> <div class="form-group"> <label for="exampleinputemail1" class="control-label">email address</label> <input type="email" class="form-control" name="exampleinputemail1" placeholder="enter email" /> </div> <div class="form-group"> <label class="control-label">what amount solicited , when?</label> <textarea class="form-control counter" rows="1" id="zb_note" name="zb_note" ></textarea> </div> <div class="form-group"> <label class="control-label">who involved in soliciation?</label> <textarea class="form-control counter" rows="1" id="zc_note" name="zc_note" ></textarea> </div> <button type="submit" class="btn btn-default">submit</button> </form>
problem due error element being inserted compared traverse use set counter text.
in counter plugin looking next() set count display using following:
$(element).next("." + options.countercssclass).html(rendertext(remaining)); that based on structure being:
<inputelement/> <counterdisplay/> but validator errorplacment doing:
<inputelement/> <validatorerror/> <counterdisplay/> so plugin next(classselector) returns no matches
you use nextall() instead of next() in plugin...or change errorplacement :
error.parent().append(element);
Comments
Post a Comment