import InputElement from 'elementify/lib/elements/inputelement.js'

public class | version 1.0.0 | since 1.0.0 | source

InputElement

Extends:

elements/htmlelement~HtmlElement → InputElement

InputElement is the common basic class wrapping all vanilla HTML inputs. It provides all properties and method to :

get/set Element value
reset Element value
validate Element value

Test:

InputElement

Constructor Summary

Private Constructor
private	constructor(node: Element, options: KeyValueObject): InputElement InputElement constructor Node and options are passed through Element call.	version 1.0.0 since 1.0.0

Member Summary

Public Members
public get	dirty: boolean Dirty state	version 1.0.0 since 1.0.0
public get	errors: Object Fetch validation errors	version 1.0.0 since 1.0.0
public get	name: string Get a unique name `name`attribute value `id` attribute value if name not set A random unique id if both name and value are not set	version 1.0.0 since 1.0.0
public get	rules: InputValidationRules Export rules set on the Element	version 1.0.0 since 1.0.0
public set	rules: InputValidationRules Import rules set on the Element	version 1.0.0 since 1.0.0
public get	type: string Get standardized lowercased type attribute	version 1.0.0 since 1.0.0
public set	type: string Set input type attribute	version 1.0.0 since 1.0.0
public get	value: boolean \| string \| undefined Get value	version 1.0.0 since 1.0.0
public set	value Set value	version 1.0.0 since 1.0.0

Private Members
private	_errors: ObjectArray Errors after validation	since 1.0.0
private	_rules: ObjectArray Rules for validation	since 1.0.0

Method Summary

Public Methods
public	label(t: string, o: KeyValueObject): HtmlElement Returns a label HtmlElement linked to this inputElement	version 1.0.0 since 1.0.0
public	rule(name: string, pattern: string \| RegExp \| CSSSelector \| InputRuleCallback, message: string, evaluate: boolean): this Add a validation rule.	version 1.0.0 since 1.0.0
public	tooltip(t: $type, o: KeyValueObject): HtmlElement Returns a tooltip HtmlElement linked to this inputElement	version 1.0.0 since 1.0.0
public	val(v: number \| string): this \| boolean \| string \| undefined Get/Set value.	version 1.0.0 since 1.0.0
public	validate(): boolean Validate the field against the rules.	version 1.0.0 since 1.0.0

Private Constructors

private constructor(node: Element, options: KeyValueObject): InputElement version 1.0.0 since 1.0.0 source

InputElement constructor Node and options are passed through Element call.

If the Element have required or pattern atributes, validation rules will be automatically set accordingly.

Params:

Name Type Attribute Description

node

Name	Type	Attribute	Description
node	Element		Input element
options	KeyValueObject		Options for the InputElement Specific keys are : `value`: initial value of the Element `options`: list of options {value: text} for a select tag

Element

Input element

options

KeyValueObject

Options for the InputElement

Specific keys are :

value: initial value of the Element
options: list of options {value: text} for a select tag

Public Members

public get dirty: boolean version 1.0.0 since 1.0.0 source

Dirty state

Will be true if field value/state have changed false otherwise

See:

https://www.sitepoint.com/detect-html-form-changes/

public get errors: Object version 1.0.0 since 1.0.0 source

Fetch validation errors

Test:

InputElement Rules

public get name: string version 1.0.0 since 1.0.0 source

Get a unique name

nameattribute value
id attribute value if name not set
A random unique id if both name and value are not set

public get rules: InputValidationRules version 1.0.0 since 1.0.0 source

Export rules set on the Element

Test:

InputElement Rules

public set rules: InputValidationRules version 1.0.0 since 1.0.0 source

Import rules set on the Element

public get type: string version 1.0.0 since 1.0.0 source

Get standardized lowercased type attribute

Test:

InputElement Type and values

public set type: string version 1.0.0 since 1.0.0 source

Set input type attribute

public get value: boolean | string | undefined version 1.0.0 since 1.0.0 source

Get value

It normalizes the behaviour for boolean inputs (radio & checkbox) :

If no value attribute is set, it will return true or false
If a value attribute is set, it will return undefined and will be skipped in fields list if not checked or returns its value otherwise.

Test:

InputElement Rule

TODO:

- Add more casting (all values are considered as string when extracted)

public set value version 1.0.0 since 1.0.0 source

Set value

Private Members

private _errors: ObjectArray since 1.0.0 source

Errors after validation

private _rules: ObjectArray since 1.0.0 source

Rules for validation

Public Methods

public label(t: string, o: KeyValueObject): HtmlElement version 1.0.0 since 1.0.0 source

Returns a label HtmlElement linked to this inputElement

Params:

Name	Type	Attribute	Description
t	string		Text for label
o	KeyValueObject		Options for HtmLElement

Return:

HtmlElement

Label

Test:

InputElement Label method

public rule(name: string, pattern: string | RegExp | CSSSelector | InputRuleCallback, message: string, evaluate: boolean): this version 1.0.0 since 1.0.0 source

Add a validation rule. Some presets are available :

required : Value must be not empty. Add a required attribute to the Element
sameas : Value must be the same than another field. You must provide a CSS Selector to query this field as second argument
int : Strict integer (only numbers)
number : Decimal number (with dot). Change Element type attribute to number
email : E-mail pattern. Change Element type attribute to email

For custom error messages when validating through browser or programmatically, you can set the title attribute of the InputElement or provide a message when creating rule.

Params:

Name	Type	Attribute	Description
name	string		Name of the rule (preset or custom)
pattern	string \| RegExp \| CSSSelector \| InputRuleCallback	optional	Presets will usually don't require this value For preset `sameas`, you must provide the required CSS selector to find the other Element in order to check value. For custom rule, you can provide a valid RegExp object or a callback. Any other value will be evaluated as a RegExp if fourth parameter is set to `true`.
message	string	optional	A message linked to a non validated rule can be store here
evaluate	boolean	optional default: false	If `true`, the method will try to evaluate `pattern`parameter as a regular expression. If `false`, it will simply don't create rule if `pattern` is not a Function or a RegExp.

Return:

this

Chainable

Test:

InputElement Rule

TODO:

Add more presets

Returns a tooltip HtmlElement linked to this inputElement

Params:

Name	Type	Attribute	Description
t	$type		Text for tooltip
o	KeyValueObject		Options for HtmLElement

Return:

HtmlElement

Tooltip

Test:

InputElement Tooltip method

public val(v: number | string): this | boolean | string | undefined version 1.0.0 since 1.0.0 source

Get/Set value. It's a chainable alias for the getter/setter properties

Params:

Name	Type	Attribute	Description
v	number \| string	optional	Value to set

Return:

this | boolean | string | undefined

Test:

InputElement Type and values

See:

value

public validate(): boolean version 1.0.0 since 1.0.0 source

Validate the field against the rules. Any errors will be logged in errors property.

Return:

boolean

trueif field validates, false otherwise.

Test:

InputElement Rule

InputElement

Extends:

Test:

Constructor Summary

Member Summary

Method Summary

Private Constructors

private constructor(node: Element, options: KeyValueObject): InputElement version 1.0.0 since 1.0.0 source

Params:

Return:

Test:

See:

Public Members

public get dirty: boolean version 1.0.0 since 1.0.0 source

See:

public get errors: Object version 1.0.0 since 1.0.0 source

Test:

public get name: string version 1.0.0 since 1.0.0 source

public get rules: InputValidationRules version 1.0.0 since 1.0.0 source

Test:

public set rules: InputValidationRules version 1.0.0 since 1.0.0 source

public get type: string version 1.0.0 since 1.0.0 source

Test:

public set type: string version 1.0.0 since 1.0.0 source

public get value: boolean | string | undefined version 1.0.0 since 1.0.0 source

Test:

TODO:

public set value version 1.0.0 since 1.0.0 source

Private Members

private _errors: ObjectArray since 1.0.0 source

private _rules: ObjectArray since 1.0.0 source

Public Methods

public label(t: string, o: KeyValueObject): HtmlElement version 1.0.0 since 1.0.0 source

Params:

Return:

Test:

public rule(name: string, pattern: string | RegExp | CSSSelector | InputRuleCallback, message: string, evaluate: boolean): this version 1.0.0 since 1.0.0 source

Params:

Return:

Test:

TODO:

public tooltip(t: $type, o: KeyValueObject): HtmlElement version 1.0.0 since 1.0.0 source

Params:

Return:

Test:

public val(v: number | string): this | boolean | string | undefined version 1.0.0 since 1.0.0 source

Params:

Return:

Test:

See:

public validate(): boolean version 1.0.0 since 1.0.0 source

Return:

Test: