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>
$(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