Form elements and validators for giving a few FUX about user experience.
bos/core/css/fux.css
$fux_css
Basic forms are supported. It is possible to apply classes from other components, such as Flavors and BUTCH classes.
Layouts
You could use Blueprint Grid to create a custom layout for your form. This can be done within the form tag, and it is possible to nest layouts.
.form-group
Use this class to add vertical spacing above and below a group of form elements.
.highlight
An input or entire form can be "highlighted" when the user focuses on (interacts with) an input. Simply apply the .highlight class to the area that is to be highlighted.
Forms may need to be enhanced with various UI elements, which require javascript plugins.
REQUIRES:
bos/core/jab/fux/form-functions.js
$form_functions_js
Copy all input fields (including select options) from one fieldset to another when a checkbox is checked.
NOTE: This feature uses unique IDs, so it can only be used once per page.
Setup:
fieldset id="copyFrom"
fieldset id="pasteTo"
Checkbox input with
id="field-copy"
TIP:
Use this method to copy inputs to hidden fields!
REQUIRES:
bos/core/jab/fux/datetime-picker.js
$datetime_picker_js
A date / time picker can be added simply by applying a class to a text input field!
Classes
Add a text input and apply any of these classes:
.datepick - m/d/y
.datetime - m/d/y h:m am/pm
.datepick-euro - d-m-y
.datetime-euro - d-m-y h:m am/pm
.datepick-full - Day, Month XX, YYYY
.datetime-full - Day, Month XX, YYYY h:m am/pm
Inline Picker
To display the picker inline (beneath the text input), simply apply the following data-attribute to the text input tag:
data-inline="true"
REQUIRES:
bos/core/jab/fux/credit-card-validator.js
$card_validator_js
The credit card input validates the type of card number the user inputs. AMEX, Discover, MasterCard, and Visa is supported. The expiration date input is automatically formatted.
Card Examples
AMEX
3400 0000 0000 009
Discover
6011 0000 0000 0004
MasterCard
5500 0000 0000 0004
Visa
4111 1111 1111 1111
PristineJS, a micro-library for validating various types of form inputs, is available as part of the CORE JAB library.
REQUIRES:
bos/core/jab/fux/pristine.js
$pristine_js
It automatically validates required, min, max, minlength, and maxlength attributes, and the value of type attributes like email, number and more. For full documentation, see pristine.js.org.
Below are patterns that can be used with the pattern or data-pristine-pattern attributes for password or other types of input.
Number rounded to 2 demimal points
"/^\d+\.\d{2}$/g"
Min 8 characters, at least one letter and one number:
"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
Min 8 characters, at least one letter, one number and one special character:
"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"
Min 8 characters, at least one uppercase letter, one lowercase letter and one number:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
Min 8 characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
Min 8 and max 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"
NOTE: Form processing functionality and documentation will be available in 3.1. This will include: