mlauer

Nintex Forms - how to limit maximum length of input field during typing

Blog Post created by mlauer Champion on Dec 8, 2014

To limit the maximum length of input field during typing you have to assign a Control CCS Class to an text box. The class name is a concatenation of string 'kob-maxtextlen-' and a number giving the maximum text length.

After assigning the Control CCS Class and activating the javascript you will find below, a little box is shown during field input on top and on left of the input control counting down the yet available input characters:

 

Javascript code:

NWF$(document).ready(function () {

   NWF$("body").append('<div id="charCounter";></div>');  // create div for counter

   var zaehlerFeld = NWF$('#charCounter');   // save as jquery object

   zaehlerFeld.hide(); // hide the div

   NWF$("[class*=kob-maxtextlen-]").each(function () { // for all html elemts with class name beginning with kob-maxtext-len

      var classes = this.className.split(" ");  // splitt class names

      for (var i = 0; i < classes.length; i++) {  // for all class names of the actual html

         if (classes[i].substr(0, 15) == "kob-maxtextlen-") {   // check if class name begins with kob-maxtext-len

            var maxlen = parseInt(classes[i].split('kob-maxtextlen-')[1]); // extract the number at the end of the class name

            NWF$(this).on('focus input blur', function () { // define an event function

               zaehlerFeld.show();   // show counter

               zaehlerFeld.css({   // format counter

                                 "text-align":"center",

                                 "display":"inline-block",

                                  "background-color":"#FFF",

                                  "border":"1px solid",

                                  "box-shadow":"3px 3px 3px #888",

                                  "height":"16px",

                                  "width":"22px"

                              });

               MaxTextLaenge(NWF$(this), maxlen, zaehlerFeld);  / call check function

            });

            NWF$(this).blur(function () {

               zaehlerFeld.text(' ');

               zaehlerFeld.hide();

            });

         }

      }

   });

 

});

 

function MaxTextLaenge(textFeld, maxAnzahl, zaehlerFeld) {

   zaehlerFeld.position({  // positioning the counter

      my: "left top-16",

      at: "left top",

      of: textFeld,

      collision: "fit"

   });

   if (textFeld.val().length > maxAnzahl) { // more then max characters enterd

      textFeld.val(textFeld.val().substr(0, maxAnzahl)); // limit to max text length

      textFeld.css('border-color', 'red');  // show control border in red

      zaehlerFeld.text(0);   // no more input allowed

   } else {

      zaehlerFeld.text(maxAnzahl - textFeld.val().length); // count down counter

      textFeld.css('border-color', "");   // normal border

   }

}

 

Minimized:

NWF$(document).ready(function(){NWF$("body").append('<div id="charCounter";></div>');var zaehlerFeld=NWF$('#charCounter');zaehlerFeld.hide();NWF$("[class*=kob-maxtextlen-]").each(function(){var classes=this.className.split(" ");for(var i=0;i<classes.length;i++){if(classes[i].substr(0,15)=="kob-maxtextlen-"){var maxlen=parseInt(classes[i].split('kob-maxtextlen-')[1]);NWF$(this).on('focus input blur',function(){zaehlerFeld.show();zaehlerFeld.css({"text-align":"center","display":"inline-block","background-color":"#FFF","border":"1px solid","box-shadow":"3px 3px 3px #888","height":"16px","width":"22px"});MaxTextLaenge(NWF$(this),maxlen,zaehlerFeld)});NWF$(this).blur(function(){zaehlerFeld.text(' ');zaehlerFeld.hide()})}}})});function MaxTextLaenge(textFeld,maxAnzahl,zaehlerFeld){zaehlerFeld.position({my:"left top-16",at:"left top",of:textFeld,collision:"fit"});if(textFeld.val().length>maxAnzahl){textFeld.val(textFeld.val().substr(0,maxAnzahl));textFeld.css('border-color','red');zaehlerFeld.text(0)}else{zaehlerFeld.text(maxAnzahl-textFeld.val().length);textFeld.css('border-color',"")}}

Outcomes