Preventing bad data from reaching your database starts with input validation. Bubble offers several built-in validation methods including content format restrictions, conditional formatting for inline errors, and Only When workflow conditions. This tutorial shows you how to combine these tools into a robust form validation system.
Overview: Validating User Input in Bubble
Form validation is the first line of defense against bad data. Bubble provides multiple validation approaches — input content formats, regex patterns, conditional formatting, and workflow conditions. This tutorial shows you how to combine them into a system that catches errors before data ever reaches your database and guides users with clear, inline error messages.
Prerequisites
- A Bubble app with at least one form (inputs + submit button)
- Basic understanding of Bubble elements and workflows
- Familiarity with the Conditional tab on elements
Step-by-step guide
Set content format restrictions on Input elements
Set content format restrictions on Input elements
Select an Input element on your page. In the Property Editor, find the Content format setting. Choose from the built-in options: Text, Email, Integer, Decimal, US Phone, and others. Setting an Email content format ensures the input only accepts valid email patterns (text@text.text). Integer and Decimal formats restrict input to numbers. These built-in formats handle basic validation without any workflow configuration.
Pro tip: The Email format checks structure but not whether the email actually exists. For critical flows, consider email verification via a confirmation link.
Expected result: Input elements only accept data matching the selected content format and show a native browser error for invalid input.
Add custom regex validation with the Regex pattern property
Add custom regex validation with the Regex pattern property
For validation beyond the built-in formats, use the regex pattern property on the Input element. In the Property Editor, find the Pattern field and enter a regular expression. For example, use ^[A-Za-z]{2,50}$ to allow only letters between 2-50 characters for a name field, or ^\+?[1-9]\d{1,14}$ for an international phone number. The input will be marked as invalid if the content does not match the pattern.
Pro tip: Test your regex patterns at regex101.com before entering them in Bubble to make sure they work as expected.
Expected result: The input validates against your custom regex pattern and rejects non-matching input.
Show inline error messages with conditional formatting
Show inline error messages with conditional formatting
Add a Text element below each input that says something like Please enter a valid email. Make it not visible on page load. Go to the Text element's Conditional tab. Add a condition: When EmailInput's value is not empty AND EmailInput is not valid. Set the property This element is visible to yes and change the text color to red. This creates an inline error that appears only when the user has entered something invalid.
Expected result: Red error messages appear below inputs when the entered data is invalid, and disappear when corrected.
Disable the Submit button until all validations pass
Disable the Submit button until all validations pass
Select your Submit button. Go to its Conditional tab. Add a condition: When EmailInput is not valid OR NameInput's value is empty OR PasswordInput's value character count < 8. Set the properties: This element isn't clickable = yes and Background color = gray (or your disabled style). This prevents users from submitting the form with invalid data and gives a visual cue that something needs to be fixed.
Expected result: The Submit button is grayed out and unclickable until all form fields contain valid data.
Add server-side validation in the workflow as a safety net
Add server-side validation in the workflow as a safety net
Even with client-side validation, always add an Only When condition on your Submit button's workflow. Set it to: Only when EmailInput is valid AND NameInput's value is not empty AND PasswordInput's value character count >= 8. This serves as a fallback in case client-side validation is bypassed. In the workflow actions, if creating a record fails, use the error handling event to show a generic error message.
Expected result: The form submission workflow only executes when all server-side validation conditions are met.
Complete working example
1FORM VALIDATION SUMMARY2========================34INPUT ELEMENTS:5 NameInput:6 - Content format: Text7 - Regex pattern: ^[A-Za-z\s]{2,50}$8 - Placeholder: "Full name"910 EmailInput:11 - Content format: Email12 - Placeholder: "you@example.com"1314 PhoneInput:15 - Content format: US Phone (or custom regex)16 - Regex: ^\+?[1-9]\d{1,14}$17 - Placeholder: "+1 (555) 123-4567"1819 PasswordInput:20 - Content format: Text21 - Placeholder: "Min 8 characters"2223ERROR TEXT ELEMENTS:24 NameError ("Please enter a valid name, 2-50 letters"):25 - Not visible on page load26 - Conditional: When NameInput is not valid AND NameInput's value is not empty27 → Visible: yes, Color: red2829 EmailError ("Please enter a valid email address"):30 - Not visible on page load31 - Conditional: When EmailInput is not valid AND EmailInput's value is not empty32 → Visible: yes, Color: red3334 PasswordError ("Password must be at least 8 characters"):35 - Not visible on page load 36 - Conditional: When PasswordInput's value character count < 8 AND value is not empty37 → Visible: yes, Color: red3839SUBMIT BUTTON:40 Conditional: When any input is not valid OR any required input is empty41 → Not clickable: yes42 → Background: gray4344 Workflow: Only when all inputs valid45 Action: Create a new User / Thing46 → name = NameInput's value47 → email = EmailInput's valueCommon mistakes when validating user input in Bubble
Why it's a problem: Relying only on client-side validation
How to avoid: Always add an Only When condition on the workflow as a server-side safety net in addition to client-side formatting
Why it's a problem: Showing error messages before the user has typed anything
How to avoid: Add AND Input's value is not empty to your error conditions so errors only appear after the user starts typing
Why it's a problem: Not providing specific error messages for each field
How to avoid: Add individual error Text elements below each input with specific guidance on what is wrong and how to fix it
Best practices
- Use built-in content formats (Email, Integer, etc.) for standard validation before reaching for regex
- Show inline error messages directly below the problematic input, not at the top of the form
- Only show errors after the user has interacted with a field (value is not empty condition)
- Disable the Submit button until all validations pass for a clear visual cue
- Add server-side validation as an Only When condition on the workflow for security
- Use green checkmarks or border colors to indicate valid fields as positive feedback
- Test validation with edge cases: empty inputs, very long strings, special characters, and copy-pasted data
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a registration form in Bubble.io with name, email, phone, and password fields. I need to validate each field with specific rules and show inline error messages. Can you help me set up the validation conditions and error display logic?
Add validation to my registration form. Name should be 2-50 letters only, email must be valid, password minimum 8 characters. Show inline red error messages below each field and disable the submit button until everything is valid.
Frequently asked questions
What regex patterns work in Bubble?
Bubble supports standard JavaScript regex syntax. Common patterns: email (^[\w.-]+@[\w.-]+\.\w{2,}$), phone (^\+?[1-9]\d{1,14}$), letters only (^[A-Za-z\s]+$), alphanumeric (^[A-Za-z0-9]+$).
Can I validate a field against the database (e.g., check if email already exists)?
Yes. Use a Do a Search For with a constraint matching the input value. If the search returns results, show an error like This email is already registered. Add this as a condition on the error text element.
How do I validate file uploads?
Set file type restrictions and max file size directly on the File Uploader element properties. For additional validation, check the File Uploader's value in your workflow conditions.
Does validation use Workload Units?
Client-side validation (conditions, regex, formatting) does not use WUs. Database lookups for uniqueness checks do use WUs because they involve a server-side search.
Can I validate a dropdown or checkbox, not just text inputs?
Yes. For dropdowns, check that the value is not empty. For checkboxes, check that the value is yes. Use the same conditional pattern to show errors and disable the submit button.
What if my validation requirements are very complex?
For multi-step validation, conditional field requirements, or cross-field rules, consider using the Toolbox plugin's Run JavaScript for custom logic. RapidDev can help design complex validation systems for forms with many interdependent fields.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation