How to Handle User Input Validation in Retool

1// Submit button Inspector settings:
2// Disabled: {{ form1.invalid }}
3// Tooltip: {{ form1.invalid ? 'Please fill in all required fields' : 'Click to submit' }}
4
5// To only enable after a specific step in a multi-step form:
6// Disabled: {{ form1.invalid || currentStep.value < 3 }}
7
8// To add a visual indicator of remaining errors:
9// Button text: {{ form1.invalid ? `Submit (${errorCount.value} errors)` : 'Submit' }}

1// Show a help text only when emailInput is invalid:
2// Text component Hidden property:
3{{ !emailInput.invalid }}
4
5// Container border color (via inline style) based on validity:
6// Style expression: {{ emailInput.invalid ? 'border: 2px solid red' : 'border: 2px solid #e2e8f0' }}
7
8// Disable a downstream action button until a specific field is valid:
9// Disabled: {{ usernameInput.invalid || usernameInput.value === '' }}
10
11// Count total invalid fields:
12{{ [nameInput, emailInput, phoneInput, roleSelect].filter(c => c.invalid).length }}

1// Temporary State: formSubmitted (default: false)
2
3// Error Text component Hidden property:
4// Show email error only after first submit attempt:
5{{ !formSubmitted.value || !emailInput.invalid }}
6
7// JS Query: handleSubmit
8await formSubmitted.setValue(true);
9
10// Check manually since we're not using Form component:
11const isValid = !nameInput.invalid
12  && !emailInput.invalid
13  && !phoneInput.invalid
14  && roleSelect.value !== null;
15
16if (!isValid) {
17  utils.showNotification({
18    title: 'Please fix the errors',
19    notificationType: 'warning',
20  });
21  return;
22}
23
24// Proceed with submission...
25await insertRecord.trigger();
26
27// Reset the flag for next use
28await formSubmitted.setValue(false);

1// Layered validation strategy for emailInput:
2// Layer 1 (built-in) — Required: ON, error: 'Email is required'
3// Layer 2 (built-in) — Pattern: Email, error: 'Enter a valid email address'
4// Layer 3 (custom) — Custom Validation expression:
5//   {{ getExistingEmails.data.some(r => r.email === self.toLowerCase()) 
6//        ? 'This email is already registered' : '' }}
7
8// Result: user sees errors progressively:
9// Empty → 'Email is required'
10// Bad format → 'Enter a valid email address'
11// Valid but taken → 'This email is already registered'
12// Valid and unique → no error, field contributes to form.valid

1// Error summary Text component content:
2{{ formSubmitted.value && form1.invalid 
3   ? 'Please fix the following:\n' + [
4       nameInput.invalid ? '• Name is required' : '',
5       emailInput.invalid ? '• Valid email address required' : '',
6       phoneInput.invalid ? '• Valid phone number required' : '',
7     ].filter(Boolean).join('\n')
8   : '' }}
9
10// Error summary Container Hidden property:
11{{ !formSubmitted.value || !form1.invalid }}
12
13// Alternative: use utils.showNotification for a toast:
14if (invalidCount > 0) {
15  utils.showNotification({
16    title: `${invalidCount} field${invalidCount > 1 ? 's' : ''} need attention`,
17    description: 'Scroll up to see highlighted errors.',
18    notificationType: 'warning',
19  });
20}