Conditional Input Validation on Webhook forms

At a glance

Is it possible to create a validation on a webhook form to check if the value entered by the user matches a predefined list? I asked ChatGPT, and it gave me this script:

<form id="myForm">
        <label for="userInput">Enter a value:</label>
        <input type="text" id="userInput" name="userInput">
        <button type="submit">Submit</button>
        <p id="message"></p>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Prevent form submission

            // List of allowed values
            const allowedValues = ["apple", "banana", "cherry"];
            
            // Get user input
            const userInput = document.getElementById("userInput").value.trim().toLowerCase();

            // Check if input matches any value in the list
            if (allowedValues.includes(userInput)) {
                document.getElementById("message").textContent = "Valid input!";
                document.getElementById("message").style.color = "green";
            } else {
                document.getElementById("message").textContent = "Invalid input. Please enter a valid value.";
                document.getElementById("message").style.color = "red";
            }
        });
    </script>

If I add that script to an HTML embed, it will work correctly. However, it does not seem to work with the webhook form (I am adding the script in the "Error Message" box). It still submits the form. See screenshot.

Is this type of validation possible with Webstudio webhook forms? If so, what do I need to do differently? Thanks!

Attachment

3 comments

LLuis

Found the solution. Here is the script:


<p id="message"></p>

<script>
    document.getElementById("clockForm").addEventListener("submit", function(event) {
        // List of valid employee IDs
        const validEmployeeIDs = [123,1234,12345,123456];

        // Get employee ID and convert it to a number
        const employeeID = parseFloat(document.getElementById("employeeid").value);

        const messageElement = document.getElementById("message");

        // Check if the entered ID is in the list
        if (!validEmployeeIDs.includes(employeeID)) {
            event.preventDefault(); // Prevent form submission if invalid
            messageElement.textContent = "Option not valid";
            messageElement.style.fontWeight = "bold"; 
            messageElement.style.fontSize = "18px";
            messageElement.style.color = "#333C48";
            messageElement.style.backgroundColor = "#ECCCC6";
            messageElement.style.padding = "20px";
        } else {
            // Clear the message when a valid ID is entered
            messageElement.textContent = "";
            messageElement.style.backgroundColor = "transparent";
            messageElement.style.padding = "0";
        }
    });
</script>

OOleg Isonen

Error Message is only rendered when server already responded with error status code. The script needs to run before you submit the form.

LLuis

The problem I was having was that I put my script inside the "Error Message" box, and as you mentioned, it didn't run because the script is not an error status code from the server. It worked perfectly once I put the script outside the webhook form component.

Add a reply

Join the Webstudio community

Conditional Input Validation on Webhook forms