How To Check Validation of IP Address in jQuery?

Last Updated : 08 Dec, 2024

To validate an IP address in jQuery, you can use regular expressions (RegEx) to match the format of valid IPv4 or IPv6 addresses.

Step 1: Set Up Your HTML Form

Include an input field for entering the IP address and a button to trigger validation.

HTML

<form id="ipForm">
    <label for="ip">Enter IP Address:</label>
    <input type="text" id="ip" placeholder="Enter IP Address">
    <button type="button" id="validate">Validate</button>
    <p id="result"></p>
</form>

Step 2: Validate IPv4 Address

IPv4 addresses must follow the format x.x.x.x, where x is a number between 0 and 255. Use the following regular expression

/^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)$/

JavaScript

$(document).ready(function () {
    $("#validate").click(function () {
        let ip = $("#ip").val();
        let ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|
        2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)
        \.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)$/;

        if (ipv4Regex.test(ip)) {
            $("#result").text("Valid IPv4 Address").css("color", "green");
        } else {
            $("#result").text("Invalid IPv4 Address").css("color", "red");
        }
    });
});

Step 3: Validate IPv6 Address

IPv6 addresses follow the format of hexadecimal numbers separated by colons. The regular expression for IPv6 validation accounts for this structure.

RegEx for IPv6

/^([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:)$/

JavaScript

$(document).ready(function () {
    $("#validate").click(function () {
        let ip = $("#ip").val();
        let ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:)$/;

        if (ipv6Regex.test(ip)) {
            $("#result").text("Valid IPv6 Address").css("color", "green");
        } else {
            $("#result").text("Invalid IPv6 Address").css("color", "red");
        }
    });
});

Complete Code

If you need to validate both IPv4 and IPv6 formats, combine the regular expressions using the | operator.

HTML

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #result {
            margin-top: 10px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <form id="ipForm">
        <label for="ip">Enter IP Address:</label>
        <input type="text" id="ip" placeholder="Enter IP Address">
        <button type="button" id="validate">Validate</button>
        <p id="result"></p>
    </form>
    <script src="main.js"></script>
</body>

</html>

JavaScript

$(document).ready(function () {
    $("#validate").click(function () {
        // Get the input value
        let ip = $("#ip").val();

        // Regular expression for IPv4
        let ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.
        (25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?
            [0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)$/;

        // Regular expression for IPv6
        let ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:)$/;

        // Combined regular expression for IPv4 and IPv6
        let combinedRegex = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.
        (25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?
            [0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)$|^
            ([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:)$/;

        // Validate the IP address
        if (combinedRegex.test(ip)) {
            $("#result").text("Valid IP Address").css("color", "green");
        } else {
            $("#result").text("Invalid IP Address").css("color", "red");
        }
    });
});

The HTML file contains an input field for entering the IP address and a button to trigger validation.
The jQuery script
- Retrieves the user input from the input field.
- Uses regular expressions to validate IPv4 and IPv6 formats.
- Combines both regular expressions to validate any IP address format.
- Displays the result as “Valid IP Address” (green text) or “Invalid IP Address” (red text).

Output

Check Validation of IP Address in jQuery

How to validate Email Id in jQuery ?

faizamu19

Improve

Article Tags :

How To Check Validation of IP Address in jQuery?

Step 1: Set Up Your HTML Form

Step 2: Validate IPv4 Address

Step 3: Validate IPv6 Address

Similar Reads

Thank You!

What kind of Experience do you want to share?