How to add conditional validation to Webflow forms using Memberstack data to prevent submission when user input exceeds available credits? Answered

• 

  Chukwudi

  • September 24, 2023 06:33

  Hi Chase,

  Yes, you can achieve with some Javascript. Here's a snippet that would help. Make sure to replace "your-form-id", "nights-field", "credits-field" with the actual IDs or class names of your form and fields.

  (NEWER SCRIPT IN COMMENT BELOW)

  <script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("#your-form-id"); // Replace with your actual form ID
const nightsField = document.querySelector("#nights-field"); // Replace with your nights field ID
const creditsField = document.querySelector("[data-ms-member='booking-credits']"); // Use the data-ms-member attribute
form.addEventListener("submit", function(event) {
const nights = parseInt(nightsField.value);
const credits = parseInt(creditsField.value); if (nights > credits) {
event.preventDefault();
alert( "Number of nights exceeds available credits.");
}
});
});
</script>

  0
• 

  Chase Adam

  • September 24, 2023 06:34

  Thank you so much! I'm still getting errors but I think another script I'm running is interfering so i'm going to build a separate page to use this in. Really appreciate your help.

  0
• 

  Chukwudi

  • September 24, 2023 06:34

  You're welcome 🙂

  0
• 

  Chase Adam

  • September 24, 2023 06:35

  This code works, except that after it shows the error and I click "ok" in the error modal, the form submits. any idea how to prevent that? Thanks again for your help.

  0
• 

  Chukwudi

  • September 24, 2023 06:35

  Sorry about that. Please use the code below instead:

  <script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("#your-form-id"); // Replace with your actual form ID
const nightsField = document.querySelector("#nights-field"); // Replace with your nights field ID
const creditsField = document.querySelector("#credits-field"); // Replace with your credits field ID
const errorField = document.querySelector("#error-field"); // Replace with your error field ID form.addEventListener("submit", function(event) {
const nights = parseInt(nightsField.value);
const credits = parseInt(creditsField.value); if (nights > credits) {
event.preventDefault();
errorField.textContent = "Number of nights exceeds available credits.";
}
});
});
</script>

  The difference here is that instead of displaying the error in a dialog box that fires a form submission when OK is clicked, the error message is displayed in a html element (which could be a Span, Div).

  0
• 

  Chase Adam

  • September 24, 2023 06:35

  amazing, thank you so much for the help!

  0
• 

  Memberstack Team

  • Edited March 09, 2026 11:14

  A good way to handle this is by using Script #195 – Custom Input Validation. That script lets you add real-time checks and custom error messages to your Webflow form fields. In your case, you can compare the user’s input (requested nights) against the hidden Memberstack field (booking credits) before submission. If the requested nights exceed the available credits, #195 can stop the form from submitting and display a clear error message like “You only have 2 credits available — please adjust your request.”

  That said, if your main need is more complex conditional logic (like multiple fields interacting or dynamic credit balances), you may need to extend #195 with a small custom JavaScript function that compares values and returns false when the condition isn’t met. Script #195 is best when you want real-time validation + friendly error handling, while a custom function may be necessary if you’re building more advanced conditional rules.

  

  0

Please sign in to leave a comment.