{"id":1388,"date":"2016-01-26T14:26:45","date_gmt":"2016-01-26T14:26:45","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=1388"},"modified":"2016-01-26T14:26:45","modified_gmt":"2016-01-26T14:26:45","slug":"validate-an-ipv4-address-with-jquery-inputmask-plugin","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/html\/validate-an-ipv4-address-with-jquery-inputmask-plugin\/","title":{"rendered":"Validate an IPv4 address with jquery.inputmask plugin"},"content":{"rendered":"

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

What does this plugin ?<\/h3>\n

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<\/i> file from the plugin) , namely the ip<\/code> alias. For more aliases, check this page<\/a>.<\/p>\n

What is an IP address ?<\/h3>\n

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

What is IPv4 (Internet Protocol Version 4)?<\/h3>\n

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.<\/p>\n

Let’s see how to do the validtion<\/h3>\n

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

Placeholder mask\"placeholder_mask\"<\/a><\/p>\n

Incorrect IP\"invalid\"<\/a><\/p>\n

Correct IP\"correct\"<\/a><\/p>\n

The HTML<\/strong> file must contain the CSS<\/strong> file, the jQuery<\/strong> libraries and the custom script file.<\/p>\n

\r\n<!-- stylesheet for validation -->\r\n<link rel="stylesheet" type="text\/css" href="css\/validation.css">\r\n \r\n<!-- jquery library -->\r\n<script type="text\/javascript" src="https:\/\/code.jquery.com\/jquery-2.1.4.min.js"><\/script>\r\n\r\n<!-- plugin file -->\r\n<script type="text\/javascript" src="https:\/\/rawgit.com\/RobinHerbots\/jquery.inputmask\/3.x\/dist\/jquery.inputmask.bundle.js"><\/script>\r\n\r\n<!-- script for validation -->\r\n<script type="text\/javascript" src="js\/validation.js"><\/script>\r\n<\/pre>\n
After being included the necessary js libraries and the CSS files, we will need to add a <input type="text"\/><\/code> which defines a one-line text field, like this below :<\/p>\n
\r\n<input type="text" class="form-input" id="ipv4" name="ipv4" \/>\r\n<\/pre>\n
The custom JavaScript file (validation.js<\/code>) has three sections:<\/p>\n
1. The code to create an input mask. For more explanation about the masking definitions you can visit the plugin documentation page<\/a>.<\/p>\n
\r\n\/* selector for input *\/\r\nvar ipv4_address = $('#ipv4');\r\n\/*\r\ncreate an input mask\r\nfor IP addresses we will use an alias defined\r\nin the core functions of the plugin, to build a mask\r\n*\/\r\nipv4_address.inputmask({\r\n    alias: "ip",\r\n    "placeholder": "_"\r\n});\r\n<\/pre>\n
2. The function code for validating the value entered into the field.<\/p>\n
\r\nfunction validateIPAddress(inputID) {\r\n    \/* trigger the jquery focusout event *\/\r\n    $(inputID).on("focusout", function() {\r\n        \/*\r\n        save the value of $(this) in the $this variable\r\n        rather than writing $(this) everywhere\r\n        *\/\r\n        var $this = $(this);\r\n        \/* save the entered string from input *\/\r\n        var entered_ip = $this.val();\r\n        \/* check to see if that something was introduced into the field *\/\r\n        if (entered_ip) {\r\n            \/*\r\n            split the resulted string by "." character\r\n            through the jquery split method and\r\n            save the splited values into an array\r\n            *\/\r\n            var ip_fields_array = entered_ip.split(".");\r\n            \/* ... *\/\r\n            \/* store the length of the array *\/\r\n            var array_length = ip_fields_array.length;\r\n            \/*regular expression that starts with 0 and continue with any digit *\/\r\n            var regex = \/^0([0-9])+\/;\r\n            \/* make an iteration through every item from array *\/\r\n            for (var i = 0; i < array_length; i++) {\r\n                var ip_field = ip_fields_array[i];\r\n                \/*\r\n                remove the "_" char and then test the regex created\r\n                true -> if we encounter a string that starts with 0\r\n                and continue with any character (other than white space)\r\n                false -> otherwise\r\n                *\/\r\n                var regex_result = regex.test(ip_field.replace(\/_\/g, ""));\r\n                \/*\r\n                show the error message if one ip field is not entered ("___")\r\n                and if the regex created is true\r\n                *\/\r\n                if (ip_field == "___" || regex_result == true) {\r\n                    \/* code for error message *\/\r\n                } else {\r\n                    \/* code for success message *\/\r\n                }\r\n            }\r\n        }\r\n    });\r\n    \/* ... *\/\r\n}\r\n<\/pre>\n
3. Calling the validation function for the id of text field given as a parameter.<\/p>\n
\r\n\/* call the function *\/\r\nvalidateIPAddress("#ipv4");\r\n<\/pre>\n
To view the function behavior you can download the archive with the entire code from here<\/a>.<\/p>\n
Thanks for reading this article. If you have any susuggestions, improvements or questions, please tell me through the comment form below.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":1001003,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,18],"tags":[55,86],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1388"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/1001003"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":12,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1388\/revisions\/1400"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}