validate.html

<!DOCTYPE html>
<html>

<head>
    <title>Input Validation</title>
</head>

<body>
    <label for="inputField">Enter a value:</label>
    <input type="text" id="inputField">
    <button id="validateButton">Validate</button>
    <p id="validationResult"></p>

    <script>
        document.getElementById("validateButton").addEventListener("click", function () {
            var inputValue = document.getElementById("inputField").value;

            // Send the input value to the server for validation
            fetch("validate_input.php", {
                method: "POST",
                body: JSON.stringify({ input: inputValue })
            })
                .then(response => response.json())
                .then(data => {
                    var validationResult = document.getElementById("validationResult");
                    if (data.valid) {
                        validationResult.textContent = "Input is valid.";
                    } else {
                        validationResult.textContent = "Input is not valid.";
                    }
                })
                .catch(error => console.error("Error:", error));
        });
    </script>
</body>

</html>