Join the Webstudio community

Updated 3 weeks ago

Conditional Input Validation on Webhook forms

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
Screenshot_2025-02-26_at_11.53.04.jpg
L
O
3 comments
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>
Error Message is only rendered when server already responded with error status code. The script needs to run before you submit the form.
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
Sign up and join the conversation on Discord
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!","answerCount":3,"upvoteCount":0,"datePublished":"2025-02-26T16:56:34.432Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cace0888-ef40-4c78-bf2e-3ecb0823b590","name":"Luis","identifier":"cace0888-ef40-4c78-bf2e-3ecb0823b590","image":"https://cdn.discordapp.com/avatars/751521056451199158/7937302c9445266ee624bd97c01c8108.webp?size=256"},"suggestedAnswer":[{"@type":"Answer","text":"Found the solution. Here is the script:\n

","upvoteCount":0,"dateCreated":"2025-03-02T01:08:54.810Z","datePublished":"2025-03-02T01:08:54.810Z","dateModified":"2025-03-02T01:09:10.307Z","url":"https://help.webstudio.is/conditional-input-validation-on-webhook-forms-3KvJVqFFpWwN#0e4e3eff-870d-4c9b-8fde-ef4e8fd0e15d","author":{"@type":"Person","url":"https://help.webstudio.is/members/cace0888-ef40-4c78-bf2e-3ecb0823b590","name":"Luis","identifier":"cace0888-ef40-4c78-bf2e-3ecb0823b590","image":"https://cdn.discordapp.com/avatars/751521056451199158/7937302c9445266ee624bd97c01c8108.webp?size=256"}},{"@type":"Answer","text":"Error Message is only rendered when server already responded with error status code. The script needs to run before you submit the form.","upvoteCount":0,"dateCreated":"2025-03-02T11:25:37.610Z","datePublished":"2025-03-02T11:25:37.610Z","dateModified":"2025-03-02T11:25:37.610Z","url":"https://help.webstudio.is/conditional-input-validation-on-webhook-forms-3KvJVqFFpWwN#3063cea2-da5b-4b54-9af2-be891811ae11","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}},{"@type":"Answer","text":"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.","upvoteCount":0,"dateCreated":"2025-03-02T14:42:15.106Z","datePublished":"2025-03-02T14:42:15.106Z","dateModified":"2025-03-02T14:42:15.106Z","url":"https://help.webstudio.is/conditional-input-validation-on-webhook-forms-3KvJVqFFpWwN#810dd41c-3672-41ff-98a0-7a2d2666ad0c","author":{"@type":"Person","url":"https://help.webstudio.is/members/cace0888-ef40-4c78-bf2e-3ecb0823b590","name":"Luis","identifier":"cace0888-ef40-4c78-bf2e-3ecb0823b590","image":"https://cdn.discordapp.com/avatars/751521056451199158/7937302c9445266ee624bd97c01c8108.webp?size=256"}}]}}