# How to validate user input in Bubble

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

## TL;DR

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.

## Before you start

- 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

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

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

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

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

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

File: `Workflow summary`

```text
FORM VALIDATION SUMMARY
========================

INPUT ELEMENTS:
  NameInput:
    - Content format: Text
    - Regex pattern: ^[A-Za-z\s]{2,50}$
    - Placeholder: "Full name"

  EmailInput:
    - Content format: Email
    - Placeholder: "you@example.com"

  PhoneInput:
    - Content format: US Phone (or custom regex)
    - Regex: ^\+?[1-9]\d{1,14}$
    - Placeholder: "+1 (555) 123-4567"

  PasswordInput:
    - Content format: Text
    - Placeholder: "Min 8 characters"

ERROR TEXT ELEMENTS:
  NameError ("Please enter a valid name, 2-50 letters"):
    - Not visible on page load
    - Conditional: When NameInput is not valid AND NameInput's value is not empty
      → Visible: yes, Color: red

  EmailError ("Please enter a valid email address"):
    - Not visible on page load
    - Conditional: When EmailInput is not valid AND EmailInput's value is not empty
      → Visible: yes, Color: red

  PasswordError ("Password must be at least 8 characters"):
    - Not visible on page load  
    - Conditional: When PasswordInput's value character count < 8 AND value is not empty
      → Visible: yes, Color: red

SUBMIT BUTTON:
  Conditional: When any input is not valid OR any required input is empty
    → Not clickable: yes
    → Background: gray

  Workflow: Only when all inputs valid
    Action: Create a new User / Thing
      → name = NameInput's value
      → email = EmailInput's value
```

## Common mistakes

- **Relying only on client-side validation** — Tech-savvy users can bypass client-side checks by manipulating the browser, sending direct API requests, or disabling JavaScript Fix: Always add an Only When condition on the workflow as a server-side safety net in addition to client-side formatting
- **Showing error messages before the user has typed anything** — Displaying errors on an empty field on page load frustrates users and looks broken Fix: Add AND Input's value is not empty to your error conditions so errors only appear after the user starts typing
- **Not providing specific error messages for each field** — A generic Form has errors message forces users to guess which field is wrong Fix: 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

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

---

Source: https://www.rapidevelopers.com/bubble-tutorial/validate-user-input-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/validate-user-input-in-bubble