JSDoc: o-forms

new Banner(bannerElement, options)

Represents a banner.

Class constructor.

Methods

• render - (instance) Render the banner.
• open - (instance) Open the banner.
• close - (instance) Close the banner.
• buildBannerElement(bannerElement) - (instance) Build a full banner element. This is used when no banner or a partial banner exists in the DOM.
• buildCloseButtonElement - (instance) Build a close button element.
• getOptionsFromDom(bannerElement) - (static) Get the data attributes from the bannerElement. If the banner is being set up declaratively, this method is used to extract the data attributes from the DOM.
• destroy - (instance) Undo the init method
• init(rootElement, options) - (static) Initialise banner components.

Links

• "Banner" class 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

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

FormsOptions

An options object for configuring the form.

Properties

• errorSummary - (type: boolean) Display an error summary at the top of the form as part of `o-forms` validation.
• preventSubmit - (type: boolean) Prevent form submission after `o-froms` validation – see the `oForms.submit` event to manually submit the form after validation. This does not apply when `useBrowserValidation` is true.
• useBrowserValidation - (type: boolean) Do not use `o-forms` validation, rely on the browser's built-in validation instead.

Type

Object

Links

• "FormsOptions" typedef on Github

FormsSubmitEvent

An event emitted when the form is submitted by the userand `o-forms` has completed validation.

Properties

• detail - (type: object) The event detail.
• detail.instance - (type: object) The instance of `o-forms`.
• detail.valid - (type: boolean) The validity of the `o-forms` instance.

Type

Event

Links

• "FormsSubmitEvent" typedef on Github

Banner#render

Instance Method

Render the banner.

Returns

• void

Links

• "render" function on Github

Banner#open

Instance Method

Open the banner.

Returns

• void

Links

• "open" function on Github

Banner#close

Instance Method

Close the banner.

Returns

• void

Links

• "close" function on Github

Banner#buildBannerElement(bannerElement)

Instance Method

Build a full banner element. This is used when no banner or a partial banner exists in the DOM.

Returns

• HTMLElement - Returns the new banner element

Links

• "buildBannerElement" function on Github

Banner#buildCloseButtonElement

Instance Method

Build a close button element.

Returns

• HTMLElement - Returns the new close button element

Links

• "buildCloseButtonElement" function on Github

Banner.getOptionsFromDom(bannerElement)

Static Method

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

Returns

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

Links

• "getOptionsFromDom" function on Github

Banner#destroy

Instance Method

Undo the init method

Links

• "destroy" function on Github

Banner.init(rootElement, options)

Static Method

Initialise banner components.

Returns

• Banner | Array.<Banner> - - The newly instantiated Banner (or Banners, if rootElement was not a banner)

Links

• "init" function 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

<anonymous>~oFormsSubmitEvent

Inner Property

Type

• FormsSubmitEvent

Links

• "oFormsSubmitEvent" constant 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