JSDoc: o-forms

ErrorSummaryElement

Properties

• element - (type: HTMLInputElement) the associated element
• id - (type: string) the input element's id
• valid - (type: boolean) was the user's value valid?
• error - (type: string) the error message for this element
• field - (type: HTMLElement) a containing o-forms-field element
• label - (type: HTMLLabelElement) an associated label element

Type

object

Links

• "ErrorSummaryElement" typedef on Github

new ErrorSummary(elements, headingMessage)

Class constructor.

Methods

• createSummary - (instance) Generate Node to hold list of invalid inputs
• createList(inputs) - (static) Generate list of anchors
• createItem(input) - (static) Generate an item for the error summary
• createAnchor(input) - (static) Generate anchor element to point at invalid input

Example

const elementsExample = [
		{
			id: 'text-input',
			valid: false,
			error: 'Please fill out this field',
			label: 'Input Label',
			element: <Element />,
		},
		{...},
	];
	new ErrorSummary(example, 'This is a heading message')

Links

• "ErrorSummary" class on Github

new Forms(formElement, options)

Class constructor.

Methods

• getDataAttributes(formElement) - (static) Get the data attributes from the formElement. If the form is being set up declaratively, this method is used to extract the data attributes from the DOM.
• handleEvent(event) - (instance) Event Handler
• validateFormInputs - (instance) Form validation Validates every element in the form and creates input objects for the error summary
• setState(...)
• destroy - (instance) Destroy form instance
• init(rootEl, opts) - (static) Initialise form component.

Links

• "Forms" class on Github

new Input(element)

Class constructor.

Methods

• handleEvent(event) - (instance) Event Handler
• validate(event) - (instance) Input validation Conditions for input validation

Links

• "Input" class on Github

new State(...)

Class constructor.

Methods

• set(state, label) - (instance) State setter

Links

• "State" class on Github

ErrorSummary#createSummary

Instance Method

Generate Node to hold list of invalid inputs

Returns

• HTMLDivElement - - a div full of error messages

Links

• "createSummary" function on Github

ErrorSummary.createList(inputs)

Static Method

Generate list of anchors

Returns

• HTMLUListElement - - the list

Links

• "createList" function on Github

ErrorSummary.createItem(input)

Static Method

Generate an item for the error summary

Returns

• Element - - li

Links

• "createItem" function on Github

ErrorSummary.createAnchor(input)

Static Method

Generate anchor element to point at invalid input

Returns

• Element - - a

Links

• "createAnchor" function on Github

Forms.getDataAttributes(formElement)

Static Method

Get the data attributes from the formElement. If the form is being set up declaratively, this method is used to extract the data attributes from the DOM.

Returns

• Object.<string, any> - - The options

Links

• "getDataAttributes" function on Github

Forms#handleEvent(event)

Instance Method

Event Handler

Returns

• void

Links

• "handleEvent" function on Github

Forms#validateFormInputs

Instance Method

Form validation Validates every element in the form and creates input objects for the error summary

Returns

Links

• "validateFormInputs" function on Github

Forms#setState(...)

Instance Method

Links

• "setState" function on Github

Forms#destroy

Instance Method

Destroy form instance

Links

• "destroy" function on Github

Forms.init(rootEl, opts)

Static Method

Initialise form component.

Returns

• Forms | Array.<Forms> - - The newly instantiated Form or Forms

Links

• "init" function on Github

Input#handleEvent(event)

Instance Method

Event Handler

Links

• "handleEvent" function on Github

Input#validate(event)

Instance Method

Input validation Conditions for input validation

Returns

• boolean - - is the input valid?

Links

• "validate" function on Github

State#set(state, label)

Instance Method

State setter

Links

• "set" function on Github