Description
Our forms behave differently across the interface. We should unify them because it provides the best user experience.
**
- Checking
- Happens as soon as possible while still being unobstructive.
- If a field changes, check it onBlur or after timeout of 2-3 sec
- Validating / Errors
- Indicates precisely what fields need to change and how, puts the window in the position to enable completion
- Ignore well-formed input, i.e. passes validation (UNLESS change detection is turned on)
- Error text placed next to field (no change in focus)
- Message about errors preventing submission indicated in red badge on disabled Save button
- onSubmit and after validation
- Scroll to top
- Top of form - General message for form field errors (“Please correct the errors in the form below…”)
- Top of form - Message for general errors (not field-specific)
- Form/Modal window behavior
- default state
- initial field focused - optional
- default values - optional
- scrolling inside (good) and outside (bad) modal window
- click outside (close modal IF no changes in form)
- Height
- Fixed
- Max-height
- Internal scrolling
- mobile size
- Optional message onBefore Navigating Away (Reset and Save are already clear; Canceling, Closing are volitional)
- Enable buttons/links only when actionable:
Save (something must have changed), Reset (something must have changed) - Save button
- Disabled - no changes
- Disabled/Error (show error badge)
- Enabled
- Reset link
- Hidden - no changes
- Enabled
- Indenting! Enforce indenting rules for forms.
- Sub-section rules
- Alignment of icons
CBUI Forms Possible Parameters
- Default focused field
- Default values
- Indicate changed fields
- Reset changed fields
- Button/links have enabled and disabled states with an additional error state for the Save button
- Error messages are field-level or form-level (and positioned accordingly)
- Field errors validated inline (non-blocking)
- Form scrolls to top on onSubmit (takes care of form errors, etc.)
- Form-level error messages at the top for specific and non-specific cases (“...some fields failed…” is a generic, non-specific msg)
- Forms display an onBeforeUnload message (for when changes have been made) before navigating away
- Regular pop up forms can be closed with Cancel or X (click-anywhere if the form is pristine)
- “Modal” forms (confirmations, for example) require a definite choice, i.e. button click, to dismiss
- In-page forms use the Save Footer control when they are significant enough.
Miscellaneous
Change enable checkboxes to toggle switches (“Enable filtering” in XDCR)
Attachments
Issue Links
- blocks
-
MB-22737 [Spock UI] : Create Bucket dialog -> Auto-compaction : No validation for blank value for Metadata Purge Interval
- Closed
-
MB-23478 [SpockUI] RBAC - user not prompted to error message in add user dialog box
- Closed
-
MB-30771 Error in log collection is not shown as closable banner
- Closed
-
MB-22736 Input fields should have upper and lower bounds
- Open
- relates to
-
MB-43172 [Backup Service] UI reactive validation can cause issues
- Open