Validate an IPv4 address with jquery.inputmask plugin

In this article, I will try to show you how to make an IPv4 address validation by using jquery.inputmask plugin. But first I would like to write some words about this plugin and his general functionality.

What does this plugin ?

This plugin provides a way to add a text format to a text field to help the user by ensuring a predefined format for this. The mask shows the general format and gives the user an idea about how they should input the data. You can use this plugin to add a mask for dates, phone numbers, IP addresses, etc. in a specific format. We will use this plugin to make a text field mask look like an IP address (XXX.XXX.XXX.XXX), for this we’ll use one of the defined aliases (some examples can be found in jquery.inputmask.extensions.js file from the plugin) , namely the ip alias. For more aliases, check this page.

What is an IP address ?

Before we start, I would like to introduce some basic concepts. One of the main functions of Internet Protocol (IP) is to give logical addressing for hosts. An IP address provides a hierarchical structure to both uniquely identify a host, and what network that host exists on. This is most often represented in decimal, in the following format : 158.80.164.3 and is comprised of four octets, separated by periods.

What is IPv4 (Internet Protocol Version 4)?

IPv4 (Internet Protocol Version 4) is the fourth revision of the Internet Protocol (IP) used to identify devices on a network through an addressing system. The Internet Protocol is designed for use in interconnected systems of packet-switched computer communication networks. IPv4 is the most widely deployed Internet Protocol used to connect devices to the Internet.

Let’s see how to do the validtion

For demo purpose, we will use a HTML file, a JavaScript file and the jquery.inputmask plugin. Below are some print examples with validation function behavior :

Placeholder mask

Incorrect IP

Correct IP

The HTML file must contain the CSS file, the jQuery libraries and the custom script file.

<!-- stylesheet for validation -->
<link rel="stylesheet" type="text/css" href="css/validation.css">
 
<!-- jquery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- plugin file -->
<script type="text/javascript" src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<!-- script for validation -->
<script type="text/javascript" src="js/validation.js"></script>

After being included the necessary js libraries and the CSS files, we will need to add a <input type="text"/> which defines a one-line text field, like this below :

<input type="text" class="form-input" id="ipv4" name="ipv4" />

The custom JavaScript file (validation.js) has three sections:

1. The code to create an input mask. For more explanation about the masking definitions you can visit the plugin documentation page.

/* selector for input */
var ipv4_address = $('#ipv4');
/*
create an input mask
for IP addresses we will use an alias defined
in the core functions of the plugin, to build a mask
*/
ipv4_address.inputmask({
    alias: "ip",
    "placeholder": "_"
});

2. The function code for validating the value entered into the field.

function validateIPAddress(inputID) {
    /* trigger the jquery focusout event */
    $(inputID).on("focusout", function() {
        /*
        save the value of $(this) in the $this variable
        rather than writing $(this) everywhere
        */
        var $this = $(this);
        /* save the entered string from input */
        var entered_ip = $this.val();
        /* check to see if that something was introduced into the field */
        if (entered_ip) {
            /*
            split the resulted string by "." character
            through the jquery split method and
            save the splited values into an array
            */
            var ip_fields_array = entered_ip.split(".");
            /* ... */
            /* store the length of the array */
            var array_length = ip_fields_array.length;
            /*regular expression that starts with 0 and continue with any digit */
            var regex = /^0([0-9])+/;
            /* make an iteration through every item from array */
            for (var i = 0; i < array_length; i++) {
                var ip_field = ip_fields_array[i];
                /*
                remove the "_" char and then test the regex created
                true -> if we encounter a string that starts with 0
                and continue with any character (other than white space)
                false -> otherwise
                */
                var regex_result = regex.test(ip_field.replace(/_/g, ""));
                /*
                show the error message if one ip field is not entered ("___")
                and if the regex created is true
                */
                if (ip_field == "___" || regex_result == true) {
                    /* code for error message */
                } else {
                    /* code for success message */
                }
            }
        }
    });
    /* ... */
}

3. Calling the validation function for the id of text field given as a parameter.

/* call the function */
validateIPAddress("#ipv4");

To view the function behavior you can download the archive with the entire code from here.

Thanks for reading this article. If you have any susuggestions, improvements or questions, please tell me through the comment form below.

Online Solutions Development Blog |

RSS