WeWeb Form Validation: Multi-Step Forms, Inputs, and Error Handling

In the left panel, click Add element (+) → Form Elements → drag Form Container onto your canvas. The Form Container is a special wrapper that tracks all Input, Select, Checkbox, Toggle, and Radio Group elements placed inside it as children. When you drop the Form Container, it creates a form scope. Any form element you add inside it is automatically registered and its value included in formData. Select the Form Container → Settings panel. You see two key settings: Validation mode ('On input change' for real-time validation as the user types, or 'On submit' for validation only when submit is clicked). For most forms, 'On input change' with submit disabled while invalid provides the best UX. The Form Container exposes these bindable properties: formData (object containing all field values), isValid (Boolean — true only when all required fields pass their rules). Individual inputs also expose their own isValid. You reference these in bindings as: formContainer['formData'] and formContainer['isValid'].

Inside the Form Container, add Input elements from Add element (+) → Form Elements → Input. For each input: select it → Settings panel → set the Name field (this becomes the key in formData — e.g., 'email' means formData.email contains its value). Set Input type to match the data: 'email' for email addresses, 'password' for passwords, 'number' for numeric fields. In the Validation section of the input Settings panel, configure rules: Required (checkbox — form is invalid if this field is empty), Email format (available when type is 'email' — validates format), Min length (minimum character count), Max length (maximum character count), Pattern (regex for custom format, e.g., `^[0-9]{5}$` for US zip codes). Each rule has an error message field — enter a user-friendly message like 'Please enter a valid email address'. Multiple rules can be active on a single input — all must pass for the field to be valid. The input's border changes color automatically based on its validity state when validation mode is 'On input change'.

Built-in rules cover common cases. For business logic — password confirmation, conditional required fields, cross-field validation — use custom validation formulas. Select an input → Settings panel → Validation section → toggle on 'Custom validation' → click the plug icon next to the validation formula field. Write a formula that returns true when the value is valid and false when it is not. Examples: Password confirmation — `formContainer['formData'].password === formContainer['formData'].confirm_password`. Minimum age — `new Date().getFullYear() - new Date(formContainer['formData'].birth_date).getFullYear() >= 18`. Phone number format — `/^\+?[1-9]\d{7,14}$/.test(formContainer['formData'].phone)`. Custom error message for failed custom validation: enter it in the 'Custom validation error message' field below the formula. Custom validation runs in addition to built-in rules — both must pass for the field to be valid. Custom validation formulas have access to all formData values, so cross-field comparisons work correctly.

1// Injection point: Input Settings panel → Validation → Custom validation formula
2// These are example formulas to paste into the binding formula editor
3
4// Password confirmation match:
5formContainer['formData'].password === formContainer['formData'].confirm_password
6
7// At least one checkbox in a group checked:
8formContainer['formData'].interests && formContainer['formData'].interests.length > 0
9
10// URL format validation:
11/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)$/.test(formContainer['formData'].website_url)
12
13// Conditional required: company name required only if 'business' account type selected:
14formContainer['formData'].account_type !== 'business' || (formContainer['formData'].company_name && formContainer['formData'].company_name.length > 0)
15
16// Number range validation:
17formContainer['formData'].quantity >= 1 && formContainer['formData'].quantity <= 100

Select the Submit Button inside the Form Container → Styling panel → find the Disabled state or use the Settings panel → bind the 'Disabled' property to: `not(formContainer['isValid'])`. This binding makes the button unclickable when the form has validation errors. For visual feedback, style the disabled button differently: in Styling panel → create a subclass for ':disabled' state → set opacity: 0.5 and cursor: not-allowed. Now the button is visually dimmed and non-interactive until all required fields pass validation. An alternative approach — allow clicking but validate on submit: change the Form Container's validation mode to 'On submit' and do not bind the button's disabled state. This shows errors only after the first submit attempt, which some UX patterns prefer (less aggressive inline validation). For inline error messages under each field: select the input → Settings panel → Error message display — toggle on 'Show error message'. This automatically shows the configured error text below the input when validation fails.

Select the Form Container → Workflows tab → On submit trigger → add actions. For Supabase: add action → Supabase → Database Insert → select your table → in the Data field, bind to `formContainer['formData']` if your field names match column names exactly. If column names differ, use an Object formula: `{name: formContainer['formData'].full_name, email: formContainer['formData'].email_address, message: formContainer['formData'].message_text}`. After the insert action, add: Change variable value → a Boolean 'formSubmitted' → true. Then bind the Form Container's display to `not(formSubmitted)` and show a success message bound to `formSubmitted`. For error handling: add an On error action branch → Change variable value → 'formError' string → the error message → bind an error message text element's display to `formError.length > 0`. For REST API: add action → REST API Request → Method: POST → URL: your endpoint → Body (JSON): `JSON.stringify(formContainer['formData'])` or a mapped object.

1// Injection point: Supabase SQL editor (run OUTSIDE WeWeb)
2// Create the contacts table for form submissions
3
4CREATE TABLE IF NOT EXISTS public.contacts (
5  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
6  full_name TEXT NOT NULL,
7  email TEXT NOT NULL,
8  company TEXT,
9  message TEXT NOT NULL,
10  created_at TIMESTAMPTZ DEFAULT now()
11);
12
13ALTER TABLE public.contacts ENABLE ROW LEVEL SECURITY;
14
15-- Allow anonymous users to submit contact forms
16CREATE POLICY "Public can insert contact forms"
17  ON public.contacts
18  FOR INSERT
19  WITH CHECK (true);
20
21-- Only authenticated users (admins) can read submissions
22CREATE POLICY "Auth users can read contacts"
23  ON public.contacts
24  FOR SELECT
25  USING (auth.role() = 'authenticated');

Multi-step forms break a long form into digestible sections. WeWeb's approach: create a Number variable for the current step. Go to Data panel → Variables → New → Number → name it 'currentStep' → default value 1. Build each step as a separate container. Use Conditional Rendering on each step container: Step 1 container → Conditional Rendering → `currentStep === 1`. Step 2 container → Conditional Rendering → `currentStep === 2`. Step 3 container → Conditional Rendering → `currentStep === 3`. Each step container holds its own form fields. Add 'Next' and 'Back' buttons: Next button workflow: Validate current step first (optionally add a custom check), then Change variable value → currentStep → `currentStep + 1`. Back button workflow: Change variable value → currentStep → `currentStep - 1`. Disable the Next button when the current step's required fields are invalid. Add a progress indicator: a row of dots or numbers whose styling is bound to the currentStep variable. Wrap ALL step containers inside ONE Form Container so formData accumulates across all steps and the final submit has all data.

For forms that include file uploads (profile photos, document attachments): drag a File Upload element inside the Form Container. In its Settings panel: set Accepted file types (e.g., 'image/*' for images, '.pdf,.doc,.docx' for documents), Maximum file size (in bytes — 5000000 = 5MB), and whether multiple files are allowed. The File Upload element exposes the selected file(s) as a bindable property. For uploading to Supabase Storage: the workflow on form submit requires two steps. Step 1: Add action → Supabase → Storage Upload file → Bucket: your bucket name → File: bind to the File Upload element's file property → Path: `uploads/${formContainer['formData'].full_name}_${Date.now()}`. Step 2: The Storage upload action returns the file URL. Add action → Supabase → Database Insert → include the returned file URL in the data object alongside other form fields. NOTE: this step requires a separate variable to hold the upload result between the two workflow actions. Create a variable 'uploadedFileUrl' and use Change variable value → bind to the upload result URL between the two steps.