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);
});
pure javascript
var address1 = document.getElementById("checkout_shipping_address_address1");
address1.onkeyup = validateMaxLength(e){
};
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
