JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple IP Address Validation</title>
</head>
<body>

    <form id="myForm">
        <!-- Use class 'ipAddress' for multiple IP address fields -->
        <label for="ipAddress1">IP Address 1:</label>
        <input type="text" class="ipAddress" name="ipAddress1" required>

        <label for="ipAddress2">IP Address 2:</label>
        <input type="text" class="ipAddress" name="ipAddress2" required>

        <!-- Add more IP address fields as needed -->

        <button type="button" onclick="validateAllIPAddresses()">Submit</button>
    </form>

    <script>
    
    </script>

</body>
</html>

JavaScript

function validateIPAddress(ipAddress, index) {
            // Check if the input is not empty and not equal to "0.0.0.0"
            if (ipAddress.trim() === "") {
                alert('Error: IP Address ' + (index + 1) + ' cannot be empty.');
                return false;
            } else if (ipAddress === "0.0.0.0") {
                alert('Error: IP Address ' + (index + 1) + ' cannot be 0.0.0.0.');
                return false;
            } else {
                // IP Address validation using a regular expression
                var ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
                
                if (!ipRegex.test(ipAddress)) {
                    alert('Error: Invalid IP Address ' + (index + 1));
                    return false;
                }
            }
            return true; // IP Address is valid
        }

        function validateAllIPAddresses() {
            var ipFields = document.querySelectorAll('.ipAddress');
            
            for (var i = 0; i < ipFields.length; i++) {
                if (!validateIPAddress(ipFields[i].value, i)) {
                    return; // Stop further processing if an error is found
                }
            }

            // If no errors found, display success message
            alert('All IP Addresses are valid.');
        }