Solutions for Javascript maxlength check

Andy Feng

Rate me:

4.88/5 (10 votes)

26 Oct 2015CPOL2 min read

28.4K

131

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

JavaScript

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:

JavaScript

$("#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:

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:

JavaScript

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:

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

JavaScript

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

pure javascript

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

HTML

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

JavaScript

$("#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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Andy Feng

Software Developer

Canada

Andy Feng is a software analyst/developer based in Toronto, Canada. He has 9+ years experience in software design and development. He specializes in Java/J2EE and .Net solutions, focusing on Spring, Hibernate, JavaFX, ASP.NET MVC, Entity framework, Web services, JQuery, SQL and related technologies.

Follow up with my blogs at: http://andyfengc.github.io/

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Solutions for Javascript maxlength check

Introduction

Way1 - basic maxlength limitation

way2 - maxlength limitation with notification

step1, prepare message

step3, add keyup event

History

License

Comments and Discussions