Data validation in Bubble prevents invalid data from reaching your database by checking values before saving. You validate at three levels: input elements (required fields, character limits), workflow conditions (Only when checks before actions), and server-side in backend workflows. This tutorial covers required field validation, custom validation rules, error message display, and server-side enforcement for robust data integrity.
Overview: Data Validation in Bubble
This tutorial covers how to prevent bad data from entering your Bubble database using validation at multiple levels — input elements, frontend workflows, and server-side backend workflows.
Prerequisites
- A Bubble app with forms that save data to the database
- Understanding of workflows, conditions, and dynamic expressions
- Familiarity with Bubble's input elements and conditional formatting
Step-by-step guide
Add basic input-level validation
Add basic input-level validation
On each input element, configure built-in validation properties. For text inputs: set 'Content format' to 'Email' for email fields, set 'Maximum length' for character limits. For number inputs: set 'Min value' and 'Max value'. For required fields: do not use Bubble's 'This input should not be empty' checkbox (it is unreliable) — instead, validate in the workflow. Add a red border conditional: 'When this input's value is empty AND page's show_errors is yes' → border color red.
Expected result: Inputs have basic format validation and visual error states for empty required fields.
Create a validation workflow before saving
Create a validation workflow before saving
On the Save button, add the main validation before any Create/Make changes action. Use 'Only when' conditions on the button itself: 'Only when Input Name's value is not empty AND Input Email's value contains "@" AND Input Phone's value:length >= 10'. If any condition fails, the workflow does not run. Create a separate workflow on the same button for the error case: 'Only when Input Name's value is empty OR ...' → set a custom state 'show_errors' to yes and display validation messages.
Pro tip: Create a custom state 'show_errors' (yes/no) on the page. Only show error messages when this state is yes — this prevents errors from showing before the user tries to submit.
Expected result: The save workflow only runs when all validations pass; otherwise, error messages appear.
Display inline error messages
Display inline error messages
Below each input, add a small red Text element with the error message (e.g., 'Name is required'). Set it invisible by default. Add a conditional: 'When page's show_errors is yes AND Input Name's value is empty' → make visible, text color red. For format errors: 'When page's show_errors is yes AND Input Email's value does not contain "@"' → show 'Please enter a valid email'. Position each error directly below its input for clear association.
Expected result: Specific error messages appear below each invalid input when the user tries to submit.
Add custom validation rules
Add custom validation rules
For complex rules that go beyond format checking: unique email check — search for Users where email = input value, count > 0 → show 'Email already registered'. Password strength — check length >= 8 AND contains a number AND contains uppercase. Date range — check that end date is after start date. Price minimum — check that price is greater than 0. Add each custom rule as a conditional on both the error message visibility and the save workflow's 'Only when' condition.
Expected result: Custom validation rules like uniqueness checks, password strength, and date logic are enforced.
Enforce validation server-side in backend workflows
Enforce validation server-side in backend workflows
Frontend validation can be bypassed. For critical data, add server-side checks in backend workflows. In any backend workflow that creates or modifies data, add 'Only when' conditions that verify the data: field is not empty, value is within allowed range, user has permission. If validation fails, return an error response or create an error log. This is especially important for API-accessible workflows where data comes from external sources.
Expected result: Server-side validation prevents invalid data even if client-side checks are bypassed.
Create a reusable validation pattern
Create a reusable validation pattern
For consistency across your app, create a standard validation approach. Before each save action, run a validation check. Store validation results in a custom state 'validation_errors' (list of text). After checking all rules, if the list is not empty, display all errors and prevent saving. If empty, proceed with the save. This pattern keeps all validation logic organized and easy to maintain.
Expected result: A consistent validation pattern is applied across all forms in the app.
Complete working example
1DATA VALIDATION — SUMMARY2============================34LEVEL 1: INPUT ELEMENTS5 Content format: email, phone, URL6 Min/Max values for numbers7 Character length limits8 Visual: red border when invalid + show_errors910LEVEL 2: FRONTEND WORKFLOWS11 Save button: Only when ALL validations pass12 Error workflow: Only when ANY validation fails13 Set show_errors = yes14 Display inline error messages1516LEVEL 3: BACKEND WORKFLOWS17 Only when conditions on data modification actions18 Check: not empty, in range, has permission19 Return error or log failure2021VALIDATION RULES:22 Required: field is not empty23 Email: contains '@' and '.'24 Phone: length >= 1025 Password: length >= 8, has number, has uppercase26 Unique: search count for same value = 027 Range: value >= min AND value <= max28 Date: end_date > start_date29 Custom: any business logic check3031ERROR DISPLAY:32 show_errors custom state (yes/no)33 Red text below each invalid input34 Only visible when show_errors = yes AND invalid35 Clear errors when user starts editingCommon mistakes when enforcing Data Validation in Bubble
Why it's a problem: Relying on Bubble's built-in 'should not be empty' input validation alone
How to avoid: Always validate in the workflow with 'Only when' conditions rather than relying on input-level validation
Why it's a problem: Showing all validation errors on page load before the user has interacted
How to avoid: Use a 'show_errors' custom state that only becomes 'yes' after the user clicks Submit
Why it's a problem: Validating only on the frontend without server-side checks
How to avoid: Add 'Only when' conditions on backend workflow actions as a second line of defense for critical data
Best practices
- Validate in workflows with 'Only when', not just on input elements
- Show errors only after the user attempts to submit (use a show_errors state)
- Display specific error messages below each invalid field for clear guidance
- Validate on both frontend (UX) and backend (security) for critical data
- Check uniqueness (email, username) by searching the database before saving
- Clear error states when the user starts editing the field
- Create a consistent validation pattern that works the same way across all forms
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to validate form inputs in my Bubble.io app before saving to the database — required fields, email format, phone number length, and unique email check. How do I implement this with proper error messages?
Add validation to my registration form. Check that name is not empty, email contains '@' and is not already registered, password is at least 8 characters with a number, and phone is at least 10 digits. Show red error messages below each invalid field. Only save when all validations pass.
Frequently asked questions
Can I use regex for pattern validation in Bubble?
Bubble does not have native regex support in dynamic expressions. For regex validation, use the Toolbox plugin's server-side JavaScript action or validate with ':contains', ':length', and other text operators.
How do I validate file uploads (type and size)?
Check the file extension with ':split by ".": last item' and compare against allowed types. Check file size against your limit. Both checks go in the workflow condition.
Should I validate the same rules on both frontend and backend?
Yes for security-critical data (authentication, payments, permissions). Frontend validation provides good UX; backend validation prevents bypassing.
How do I validate that a date is in the future?
Add the condition: 'Input Date's value > Current date/time'. Show an error message if the user selects a past date.
Can RapidDev help implement data validation and quality controls?
Yes. RapidDev can implement comprehensive validation systems with client and server-side checks, custom business rules, and data quality monitoring in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation