unify form behavior

Our forms behave differently across the interface. We should unify them because it provides the best user experience.
 
**

• Checking

1. Happens as soon as possible while still being unobstructive. 
2. If a field changes, check it onBlur or after timeout of 2-3 sec

1. Validating / Errors
2. Indicates precisely what fields need to change and how, puts the window in the position to enable completion
3. Ignore well-formed input, i.e. passes validation (UNLESS change detection is turned on)
4. Error text placed next to field (no change in focus)
5. Message about errors preventing submission indicated in red badge on disabled Save button

1. onSubmit and after validation
2. Scroll to top
3. Top of form - General message for form field errors (“Please correct the errors in the form below…”)
4. Top of form - Message for general errors (not field-specific)

1. Form/Modal window behavior
2. default state
3. initial field focused - optional
4. default values - optional

1. scrolling inside (good) and outside (bad) modal window
2. click outside (close modal IF no changes in form)
3. Height
4. Fixed
5. Max-height
6. Internal scrolling

1. mobile size

1. Optional message onBefore Navigating Away (Reset and Save are already clear; Canceling, Closing are volitional)
2. Enable buttons/links only when actionable: 
   Save (something must have changed),  Reset (something must have changed)
3. Save button
4. Disabled - no changes
5. Disabled/Error (show error badge)
6. Enabled

1. Reset link
2. Hidden - no changes
3. Enabled

1. Indenting! Enforce indenting rules for forms.
2. Sub-section rules
3. Alignment of icons

CBUI Forms Possible Parameters

1. Default focused field
2. Default values
3. Indicate changed fields
4. Reset changed fields
5. Button/links have enabled and disabled states with an additional error state for the Save button
6. Error messages are field-level or form-level (and positioned accordingly)
7. Field errors validated inline (non-blocking)
8. Form scrolls to top on onSubmit (takes care of form errors, etc.)
9. Form-level error messages at the top for specific and non-specific cases (“...some fields failed…” is a generic, non-specific msg)
10. Forms display an onBeforeUnload message (for when changes have been made) before navigating away
11. Regular pop up forms can be closed with Cancel or X (click-anywhere if the form is pristine)
12. “Modal” forms (confirmations, for example) require a definite choice, i.e. button click, to dismiss
13. In-page forms use the Save Footer control when they are significant enough.

Miscellaneous

Change enable checkboxes to toggle switches (“Enable filtering” in XDCR)