# How to Enforce Data Validation in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
DATA VALIDATION — SUMMARY
============================

LEVEL 1: INPUT ELEMENTS
  Content format: email, phone, URL
  Min/Max values for numbers
  Character length limits
  Visual: red border when invalid + show_errors

LEVEL 2: FRONTEND WORKFLOWS
  Save button: Only when ALL validations pass
  Error workflow: Only when ANY validation fails
    Set show_errors = yes
    Display inline error messages

LEVEL 3: BACKEND WORKFLOWS
  Only when conditions on data modification actions
  Check: not empty, in range, has permission
  Return error or log failure

VALIDATION RULES:
  Required: field is not empty
  Email: contains '@' and '.'
  Phone: length >= 10
  Password: length >= 8, has number, has uppercase
  Unique: search count for same value = 0
  Range: value >= min AND value <= max
  Date: end_date > start_date
  Custom: any business logic check

ERROR DISPLAY:
  show_errors custom state (yes/no)
  Red text below each invalid input
  Only visible when show_errors = yes AND invalid
  Clear errors when user starts editing
```

## Common mistakes

- **Relying on Bubble's built-in 'should not be empty' input validation alone** — This validation is inconsistent and does not prevent the workflow from running in all cases Fix: Always validate in the workflow with 'Only when' conditions rather than relying on input-level validation
- **Showing all validation errors on page load before the user has interacted** — Seeing error messages before even filling out the form is confusing and frustrating for users Fix: Use a 'show_errors' custom state that only becomes 'yes' after the user clicks Submit
- **Validating only on the frontend without server-side checks** — Frontend validation can be bypassed by determined users who access the API directly or modify the browser Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/enforce-data-validation-checks-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/enforce-data-validation-checks-bubble