Regular Expression Code Snippets
November 23, 2016
Active Directory Authentication in ASP.NET MVC 5
November 24, 2016

Form Wizard Pro And JQuery Word Count Revisited, Yet Again

For End Users If your resident developer has already implemented the code below, then this is all you need to paste the following into your form (specifically, the following: This goes into your question text [Maximum of X words/chars - <span class="alert-friendly remainX">X</span> words/chars remaining] This goes into your CSS class field limitWordsX  OR   limitChars500 [...]

For End Users

If your resident developer has already implemented the code below, then this is all you need to paste the following into your form (specifically, the following:

This goes into your question text

[Maximum of X words/chars – <span class=”alert-friendly remainX”>X</span> words/chars remaining]

This goes into your CSS class field

limitWordsX  OR   limitChars500
Word/Char Limit

For Developers

In my last entry, I added some logic to limit both words/chars in an input field.  One fairly important piece of missing functionality however would be handling forms with inputs with identical character/word limits.  Eg, imagine a form with two textareas, both of which required a limit of 250 words.  Because my last code examples used unique ids, that code wasn’t going to work.  This code will, however (as long as your notification element is contained with the element with the limitChars/limitWords class).  Eg: in mojo, you could use this text:

Please describe your educational goals, including degree(s) already attained.  [Maximum of 250 words - <span class="alert-friendly remain250">250</span> words remaining]  

Then for your actual question’s CSS class, use this: limitWords250

Finally, you can provide color as feedback like so:

.alert-friendly {color:green;}
.alert-error {color:red;}

 

  $(document).ready(function() {                // limit chars by class name.  Eg, limitChars30 would limit chars to 30.      $('[class*=limitChars]').each(function() {                        // get the element's actual class name          var elClass = $(this).attr('class');                    // extract max char value from class name by grabbing digits          var maxChars = elClass.match(/[0-9]+/);                    // next find the input element to limit          var elToLimit = $(':input', this);                    // and the feedback element          var elNotify = $('span.remain' + maxChars, this);                    // when the input changes          $(elToLimit).keyup(function() {                            // get the length of the element              var elLength = $(elToLimit).val().length;                            // reset the current input's value, up to the maxChars allowed              $(elToLimit).val($(elToLimit).val().substring(                  0, maxChars));                // get num of remaining chars              var remain = maxChars - parseInt(elLength);                            // colorify the notification text              if (remain > 0)              {                  elNotify.addClass("alert-friendly");                  elNotify.removeClass("alert-error");              }              else              {                  elNotify.addClass("alert-error");                  elNotify.removeClass("alert-friendly");              }                            // cue the user to what they have left              elNotify.text(remain);            });      });            // limit words by class name.  Eg, limitWords30 would limit words to 30.      $('[class*=limitWords]').each(function() {          var elClass = $(this).attr('class');          var maxWords = elClass.match(/[0-9]+/);          var elToLimit = $(':input', this);          var elNotify = $('span.remain' + maxWords, this);                    $(elToLimit).keyup(function() {              var numWords = jQuery.trim(elToLimit.val()).split(' ').length;                            if (elToLimit.val() === '') {                  numWords = 0;              }                            if (numWords > maxWords && maxWords != 0) {                  var words = $(elToLimit).val().split(/b[s,.-:;]*/);                  var content = $(elToLimit).val();                  for (var i = maxWords; i < words.length; ++i) {                      content = trimNonWords(content);                      content = content.substring(0,                          content.length - words[i].length                      );                  }                                    $(elToLimit).val(content);              }                            remain = maxWords - parseInt(numWords);                              if (remain > 0)              {                  elNotify.addClass("alert-friendly");                  elNotify.removeClass("alert-error");              }              else              {                  elNotify.addClass("alert-error");                  elNotify.removeClass("alert-friendly");              }                            elNotify.text(remain);                          });      });            function trimNonWords(str) {          var col = str.length - 1;          while (" ,.-:;".indexOf(str.charAt(col)) >= 0) {              --col;          }          if (col + 1 < str.length) {              return str.substring(0, col + 1);          }          return str;      }  });