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!
<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>
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"}}]}}