Solutions for Javascript maxlength check

Andy Feng

4.88/5 (9 votes)

Oct 26, 2015

CPOL

2 min read

29988

132

This article introduces multiple approaches to implement a Javascript maxlength check in browsers

Download Maxlength.zip - 15.2 KB

Introduction

It is very common to implement maxlength check in the client side(browser). For example, limit the address textbox within 50 characters or limit the content textarea within 1000 characters. There are multiple ways sto accomplish this requirement.

Let's say we have a customer information form as follows and want to add maxlength check for address textbox.

Using the code

Way1 - basic maxlength limitation

Define a string array to save all field ids and loop to set max length explicitly

var fields = [
  "checkout_billing_address_first_name",
  "checkout_billing_address_last_name",
  "checkout_billing_address_company",
  "checkout_billing_address_address1",
  "checkout_billing_address_address2",
  "checkout_billing_address_city",
  "checkout_billing_address_zip",
  "checkout_billing_address_phone"];
for (i = 0; i < fields.length; i++) {
   document.getElementById(fields[i]).maxLength = 35;
}

It simply limit the maximum length of the textbox/textarea. The result is, when use enter information in the textbox, javascript ignores the characters when input length is over 50 and does have any notification.

way2 - maxlength limitation with notification

step1, prepare message

In order to display message while user is entering information, we need to dynamically append a text element(e.g. <p></p>, <div></div> or <span></span>) after the textbox.

We can add use jquery:

$("#checkout_billing_address_address1").after("<p style='color:red'>the max length of 50 characters is reached, you typed in xx characters</p>");

Here, we use after() instead of append(). It is because, .append() add child element inside an container element at last index(like appendChild() in pure javascript), whereas .after() add an element after the selected element. In this case, we add a paragraph after the textbox.

use pure javascript:

var address1 = document.getElementById("checkout_billing_address_address1");
address1.parentNode.innerHTML = address1.parentNode.innerHTML + "<p style='color:red'>the max length of 50 characters is reached, you typed in xx characters</p>";
var maxLength = document.getElementById("maxLength");

step2, add check logic

Next is to add logic to check if the current length is over 50 characters. If it is, the form display a message.

jquery:

var Max_Length = 50;
var length = $("#checkout_billing_address_address1").val().length;
if (length > Max_Length) {
  $("#checkout_billing_address_address1").after("<p style='color:red'>the max length of "+Max_Length + " characters is reached, you typed in  " + length + "characters</p>");
}

pure javascript:

var Max_Length = 50;
var length = document.getElementById("checkout_shipping_address_address1").value.length;
if (length > Max_Length) {
  var address1 = document.getElementById("checkout_billing_address_address1");
  address1.parentNode.innerHTML = address1.parentNode.innerHTML + "<p style='color:red'>the max length of "+Max_Length + " characters is reached, you typed in  " + length + "characters</p>";
}

step3, add keyup event

We attach a keyup event to the textbox. Each character user entered will trigger the maxlength check logic.

jquery

$("#checkout_shipping_address_address1").keyup(function(e) {
  checkMaxLength(e);//wrap the maxlength check logic
});

pure javascript

var address1 = document.getElementById("checkout_shipping_address_address1");
address1.onkeyup = validateMaxLength(e){
  //wrap the maxlength check logic
};

step4, assemble them together

Please download attachment for details.

way3 - use 3rd-party library to implement maxlength validation

There are public libraries we can use to handle this. For instance, jQuery Max Length(http://keith-wood.name/maxlength.html) is a nice lib and very easy to use.

step1, download and unzip lib file into your project

step2. add reference of lib in your html page

<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/jquery.maxlength.css">
  <script type="text/javascript" src="js/jquery.plugin.js"></script>
  <script type="text/javascript" src="js/jquery.maxlength.js"></script>
  ...
</head>

step3, Connect the max length functionality to your input boxes.

$("#checkout_billing_address_address1").maxlength({max: 50});

That's it.

The message can be customized to fit your needs, more information is available at http://keith-wood.name/maxlength.html

History

October 26, 2015, first version posted