HTML Input Type SerialNumber

A widget that assists users while filling out HTML Input fields intended for Serial Numbers.

LIVE Pattern Matching and Auto Completion

Pattern Matching

It test for the Regular Expression separately on separate pieces of the input, instead of all at once. The invalid characters automatically get deleted.

Auto Completion

Some Serial Numbers have separating characters, such as dashes, between the pieces. This input field automatically adds those separators wherever required.

Since both these features LIVE, this widget assists the user while filling out the Serial Number, instead of simply pointing out that it was incorrectly formatted.

DEMO

Installation

1. Link jQuery version 3.x.x to the head of the page (if not already linked)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2. Download and link jquery.serialnumberinput.js to the head of the page

<script type="text/javascript" src="jquery.serialnumberinput.js"></script>

3. Add this script anywhere on the page. Configure it according to your own needs.

<script type="text/javascript">
	// If you want a separate configuration for each input box, you can replace the general selector input[type='serialnumber'] with specific IDs, Classes, etc.
	$("input[type='serialnumber']").serialnumberinput(
	{
		/*
		 The following configuration would allow a serial number of the format 000\00\A
		 */
		"separator": "\\",
		"pieces":
		[
			{
				"length": 3,
				"pattern": "[0-9]",
			},
			{
				"type": "separator",
			},
			{
				"length": 2,
				"pattern": "[0-9]",
			},
			{
				"type": "separator",
			},
			{
				"length": 1,
				"pattern": "[a-zA-Z]",
			},
		],
	});
</script>

4. Use the input type serialnumber anywhere in the page to test if it works.

<input type="serialnumber">

Configuration

1. separator: Defines the character which should be automatically added as a separator. (Default value is an empty string "")

   NOTE: The separator property can be defined for the whole input box in general, or specially for each separator. Specific definitions override the general ones.

2. pieces: This is an array of piece objects.

   a. length: A positive integer denoting the number of character in a piece. (Default value is 1)

   b. pattern: A Regular Expression which defines the allowed characters in a piece.

   c. type: Should be set to separator to add a separator, or else, should not be set at all.

Information

Made as a plugin to jQuery

Dependent on jQuery version 3.x.x

Author

Ishpreet Singh Bhasin

Website

GitHub