Class: Validator

componyx .UI.Validator(id, properties) → {Object}

new Validator(id, properties) → {Object}

Validator class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.validate`	componyx.UI.base.AjaxMethod	AJAX method used to validate field values on the server.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

Rule
ValidatorEvents

Members

ajaxErrorMessage :String

Gets or sets the message which is shown when ajax validation throws an error.

Type:

String

cssClassFeedback :String

Gets or sets the css class of a feedback ul element.

Type:

String

cssClassIcon :String

Gets or sets the css class of the icon in a feedback or summary message.

Type:

String

cssClassInvalid :String

Gets or sets the css class of the feedback/summary message when the input field fails validation.

Type:

String

cssClassSummary :String

Gets or sets the css class of a summary ul element.

Type:

String

cssClassTooltipTrigger :String

Gets or sets the css class of the tooltip trigger.

Type:

String

cssClassValid :String

Gets or sets the css class of the feedback/summary message when the input field passes validation.

Type:

String

cssClassValidating :String

Gets or sets the css class of the feedback message when server-side validation is processing.

Type:

String

dateFormat :String

Gets or sets the input format for dates. Default: MM/dd/yyyy

Type:

String

decimalSeparator :String

Gets or sets the input decimal separator for numbers. Default: '.'

Type:

String

detectFields :Boolean

Gets or sets a value indicating if fields are being detected when the component initializes.

Type:

Boolean

events :componyx.UI.Validator.ValidatorEvents

Validator events

Type:

componyx.UI.Validator.ValidatorEvents

feedbackIdentifyingCssClass :String

Gets or sets the identifying css class of the field feedback container.

Type:

String

formId :String|null

Gets or sets the form id of the form that holds the input fields when using multiple forms on a single page.

Type:

String | null

friendlyFieldNames :Array.<String>

List containing the friendly field names.

Type:

Array.<String>

groupSeparator :String

Gets or sets the input group separator for numbers. Default: ','

Type:

String

invalidFieldMessage :String

Gets or sets the message which is shown when a field fails validation. Message is not shown when the ErrorMessage is defined on the model property.

Type:

String

invalidFields :Array.<String>

Gets or sets the fields which failed validation on postback.

Type:

Array.<String>

live :Boolean

Gets or sets a value indicating whether field validation should be performed while typing (defaults to false).

Type:

Boolean

liveDelay :Number

Gets or sets the delay in milliseconds before the live field validation is performed.

Type:

Number

messageDisplay :componyx.UI.Validator.MessageDisplayOption

Gets or sets a value indicating how validation messages are being displayed.

Type:

componyx.UI.Validator.MessageDisplayOption

rules :Array.<componyx.UI.Validator.Rule>|String|null

Gets or sets the initial validator rules (Array or JSON string).

Type:

Array.<componyx.UI.Validator.Rule> | String | null

showValidFields :componyx.UI.Validator.ShowValidFieldsOption

Gets or sets when valid fields are displayed.

Type:

componyx.UI.Validator.ShowValidFieldsOption

showValidFieldsInSummary :Boolean

Gets or sets a value indicating whether valid fields are also displayed in the summary container.

Type:

Boolean

staticASPNETFieldNames :Boolean

Gets or sets a value indicating whether auto generated field names should be corrected to static names.

Type:

Boolean

summaryContainerId :String

Gets or sets the container id of the validation message summary.

Type:

String

summaryMessageDisplay :componyx.UI.Validator.MessageDisplayOption

Gets or sets a value indicating how validation messages are being displayed in the summary container.

Type:

componyx.UI.Validator.MessageDisplayOption

tooltipManagerId :String|null

Gets or sets the tooltip manager used to display tooltips.

Type:

String | null

tooltipTriggerTabIndex :String

Gets or sets the tabindex of the tooltip trigger element.

Type:

String

validFieldMessage :String

Gets or sets the message which is shown when a field passes validation.

Type:

String

validFields :Array.<String>

Gets or sets the fields which passed validation on postback.

Type:

Array.<String>

validatingFieldMessage :String

Gets or sets the message which is shown when ajax validation is processing.

Type:

String

validatingFieldMessageDelay :Number

Gets or sets the delay for the validating field message which is shown when ajax validation is processing.

Type:

Number

validationCssOnField :Boolean

Gets or sets a value indicating whether the validation status css classes are applied to the (input/textarea/select/contenteditable) field (defaults to true).

Type:

Boolean

(static, readonly) DataTypeOption :number

DataTypeOption

Type:

number

Properties:

Name	Type	Description
`INTEGER`	number
`FLOAT`	number
`DATETIME`	number
`EMAIL`	number
`URL`	number
`SOURCE`	number

(static, readonly) MessageDisplayOption :number

MessageDisplayOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`FEEDBACKFIRST`	number
`FEEDBACKALL`	number
`FEEDBACKFIRST_TOOLTIPALL`	number
`TOOLTIPFIRST`	number
`TOOLTIPALL`	number

(static, readonly) ShowValidFieldsOption :number

ShowValidFieldsOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`REQUIRED`	number
`FILLED`	number
`ALL`	number

(static, readonly) TypeOption :number

TypeOption

Type:

number

Properties:

Name	Type	Description
`REQUIRED`	number
`DATATYPE`	number
`LENGTH`	number
`RANGE`	number
`REGEX`	number
`COMPARE`	number
`CUSTOM`	number
`AJAX`	number

Methods

addRule(fieldName, settings, typeopt)

Adds a validation rule of the specified type for the given field name(s).

Parameters:

Name Type Attributes Description

fieldName

String | Array.<String>

The name of the form field(s).

settings

Object

The validation rule settings.

Properties

Name	Type	Attributes	Description
`feedbackId`	String		The identifier of the element used by the Validator to display validation result feedback.
`autoValidate`	Boolean		A value indicating if the field is validated when the field value changes.
`live`	Boolean		A value indicating if the field validation is done while typing.
`getValue`	function		A custom method to return the value for this field. Passes in the field element and expects the field value as result.
`msg`	String		The message to display if validation fails.
`when`	String	<optional>	The name of the method that returns a boolean value to determines whether the field is required (true) or not (false). (REQUIRED type validation).
`min`	Number \| String	<optional>	The minimum value. (LENGTH and RANGE type validation).
`max`	Number \| String	<optional>	The maximum value. (LENGTH and RANGE type validation).
`pattern`	RegExp		The Regular expression pattern. (REGEX type validation).
`fields`	Array.<HTMLElement> \| Array.<String>		The HTML element(s), element name(s) or values to compare against.
`operators`	Array.<String>		The operator(s) to use for comparison: < 'LessThan', <= 'LessThanOrEqualTo', > 'GreaterThan', >= 'GreaterThanOrEqualTo', or == 'EqualTo' (default). Can be a single entry (applied to all fields) or an array aligned with `fields`.
`dataType`	componyx.UI.Validator.DataTypeOption		The data-type to which the field value must comply. (DATATYPE type validation).
`alwaysCheck`	Boolean		A value indicating if the validation rule should always be checked even if the field validation has already failed (only applies to type CUSTOM).
`onValidation`	OnValidation		A function(sender, args) invoked when the field is validated. (CUSTOM type validation).
`onBeforeValidation`	OnBeforeValidation		A function(sender, args) invoked before the field is validated. (AJAX type validation).
`onAfterValidation`	OnAfterValidation		A function function(sender, args) invoked after the field is validated. (AJAX type validation).

type

TypeOption

The type of the validation. May be omitted to apply a global field setting only (feedbackId, autoValidate or live).

0 REQUIRED
1 DATATYPE
2 LENGTH
3 RANGE
4 REGEX
5 COMPARE
6 CUSTOM
7 AJAX

clear(containeropt, keepForRemovedFieldopt)

Removes the validation rules for all fields.

Parameters:

Name	Type	Attributes	Description
`container`	HTMLElement	<optional>	A container element to restrict clearance to fields within the container.
`keepForRemovedField`	Boolean	<optional>	A value indicating to keep (instead of clearing) validation rules for field elements removed from the document.

clearFeedback(containeropt, keepForRemovedFieldopt)

Removes the feedback messages for all fields.

Parameters:

Name	Type	Attributes	Description
`container`	HTMLElement	<optional>	A container element to restrict clearance to fields within the container.
`keepForRemovedField`	Boolean	<optional>	A value indicating to keep (instead of clearing) validation rules for field elements removed from the document.

clearFieldFeedback()

Removes the feedback messages for the specified field name.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

detect(containeropt, ignoreHiddenopt)

Detects validation rules specified through data-attributes on input elements.

Parameters:

Name	Type	Attributes	Description
`container`	HTMLElement	<optional>	A container element to restrict detection to fields within the container.
`ignoreHidden`	boolean	<optional>	A value indicating whether hidden fields should be excluded from detection.

getFields() → {Object}

Gets all the validation fields with there defined rules.

Returns:

An object with field-name as key and the validation rules as value.

Type: Object

getRules(fieldName)

Returns the validation rules for the specified field.

Parameters:

Name	Type	Description
`fieldName`	String	The name of the form field.

hasRule(fieldName)

Returns true if the validation rule is set for this field, otherwise false.

Parameters:

Name	Type	Description
`fieldName`	String	The name of the form field.

hasRules(fieldName)

Returns true if there are validation rules for this field, otherwise false.

Parameters:

Name	Type	Description
`fieldName`	String	The name of the form field.

init()

Initializes the Validator component.

isValid()

Returns true if the current validation state is valid, otherwise false

removeRule(fieldName, type)

Removes the validation rule of the specified type for the given field name(s).

Parameters:

Name	Type	Description
`fieldName`	String \| Array.<String>	The name of the form field (or array of field names).
`type`	TypeOption	The type of the validation

removeRules(fieldName)

Removes the validation rules for the given field name(s).

Parameters:

Name	Type	Description
`fieldName`	String \| Array.<String>	The name of the form field (or array of field names).

render()

Initializes the Validator component. Both init and render are the same for this component.

resetState(fieldName)

Resets the field's validation state.

Parameters:

Name	Type	Description
`fieldName`	String \| Array.<String>	The name of the form field (or array of field names).

resetStates(containeropt)

Resets the validation state for all fields.

Parameters:

Name	Type	Attributes	Description
`container`	HTMLElement	<optional>	A container element to restrict the state reset to fields within the container.

setInvalidFieldFeedbackTemplate(content)

Defines the template for an invalid field in the feedback container. The template supports the below listed interpolations. Default value: {icon}{tooltipTrigger}{multiple}[ 1-{messageCount} ]{/multiple}{/tooltipTrigger} {message}

{icon} This value will be replaced validation state icon.
{fieldName} This value will be replaced with the name of the validation field.
{message} This value will be replaced with the validation message.
{tooltipTrigger} This value will be replaced with the opening trigger element tag.
{/tooltipTrigger} This value will be replaced with the closing trigger element tag.
{multiple} This value will be replaced with the opening multiple element tag.
{/multiple} This value will be replaced with the closing multiple element tag.
{messageCount} This value will be replaced with the validation message count.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

setInvalidFieldPopupTemplate(content)

Defines the template for an invalid field in the popup. The template supports the below listed interpolations. Default value: {icon}{fieldName}: {tooltipTrigger}{multiple}[ 1-{messageCount} ]{/multiple}{/tooltipTrigger} {message}

{message} This value will be replaced with the validation message.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

setInvalidFieldSummaryTemplate(content)

Defines the template for an invalid field in the summary container. The template supports the below listed interpolations. Default value: {icon}{fieldName}: {tooltipTrigger}{multiple}[ 1-{messageCount} ]{/multiple}{/tooltipTrigger} {message}

{icon} This value will be replaced validation state icon.
{fieldName} This value will be replaced with the name of the validation field.
{message} This value will be replaced with the validation message.
{tooltipTrigger} This value will be replaced with the opening trigger element tag.
{/tooltipTrigger} This value will be replaced with the closing trigger element tag.
{multiple} This value will be replaced with the opening multiple element tag.
{/multiple} This value will be replaced with the closing multiple element tag.
{messageCount} This value will be replaced with the validation message count.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

setValidFieldFeedbackTemplate(content)

Defines the template for a valid field in the feedback container. The template supports the below listed interpolations. Default value: {icon}{message}

{icon} This value will be replaced validation state icon.
{fieldName} This value will be replaced with the name of the validation field.
{message} This value will be replaced with the validation message.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

setValidFieldSummaryTemplate(content)

Defines the template for a valid field in the summary container. The template supports the below listed interpolations. Default value: {icon}{fieldName} {message

{icon} This value will be replaced validation state icon.
{fieldName} This value will be replaced with the name of the validation field.
{message} This value will be replaced with the validation message.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

setValidatingFieldFeedbackTemplate(content)

Defines the template for a validating field in the feedback container. The template supports the below listed interpolations. Default value: {icon}{message}

{icon} This value will be replaced validation state icon.
{fieldName} This value will be replaced with the name of the validation field.
{message} This value will be replaced with the validation message.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template

show()

Initializes the Validator component if this has not yet been done.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

validate(containeropt, filledOnlyopt)

Validates all fields or the fields within the specified container element.

Parameters:

Name	Type	Attributes	Description
`container`	HTMLElement	<optional>	A container element to restrict validation to fields within the container.
`filledOnly`	Boolean	<optional>	A value indicating to only validate filled out fields.

validateCompare(settings, value, dataTypeopt) → {Boolean}

Validates the field by value comparison using the specified settings.

Parameters:

Name	Type	Attributes	Description
`settings`	Object		Validation rule settings (includes fields and operators).
`value`	String		The field value.
`dataType`	componyx.UI.Validator.DataTypeOption \| null	<optional>	Field value data type (default: string).

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

validateField(fieldName) → {boolean}

Validates a specific field

Parameters:

Name	Type	Description
`fieldName`	String	The name of the form field.

Returns:

A value indicating if the field is valid, works only for simple non async validations.

Type: boolean

validateLength(settings, value) → {Boolean}

Validates the field value length using the specified settings.

Parameters:

Name	Type	Description
`settings`	Object	The validation rule settings.
`value`	String	The field value.

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

validateRange(settings, value, value) → {Boolean}

Validates the field value range using the specified settings.

Parameters:

Name	Type	Description
`settings`	Object	The validation rule settings.
`value`	String	The field value.
`value`	DataTypeOption	The data type of the value.

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

validateRegEx(settings, value) → {Boolean}

Validates the field value by the configured regex pattern using the specified settings.

Parameters:

Name	Type	Description
`settings`	Object	The validation rule settings.
`value`	String	The field value.

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

validateRequired(settings, field) → {Boolean}

Validates the required field using the specified settings.

Parameters:

Name	Type	Description
`settings`	Object	The validation rule settings.
`field`	Array.<HTMLElement>	The field or fields in case of a Radio Button.

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

validateType(settings, value) → {Boolean}

Validates the field value data-type using the specified settings.

Parameters:

Name	Type	Description
`settings`	Object	The validation rule settings.
`value`	String	The field value.

Returns:

A value indicating if the field is valid (true) or invalid (false).

Type: Boolean

Type Definitions

FieldEventArgs

Validator field event arguments.

Type:

Object

Properties:

Name	Type	Attributes	Description
`fieldElement`	HTMLElement		The validated field element.
`fieldName`	String		The name of the field.
`fieldValue`	String		The value of the field.
`fieldData`	Object		The internal validation data of the field (validation settings and state).
`msg`	Array.<String>		The validation messages.
`feedbackElement`	HTMLUListElement	<optional>	The feedback list element (onFieldFeedback only, when feedback is displayed).
`summaryElement`	HTMLUListElement	<optional>	The summary list element (onFieldFeedback only, when the field is summarised).

HTML_Attributes

A list of supported Validator HTML data-attributes.

Type:

Object

Properties:

Name	Type	Attributes	Description
`"data-ui-validator-id"`	String	<optional>	The identifier of the Validator component on which the rule is added.
`"data-ui-validator-feedbackid"`	String	<optional>	The identifier of the element used by the Validator to display validation result feedback.
`"data-ui-validator-autovalidate"`	String	<optional>	A value ('true' or 'false') indicating if the field is validated when the field value changes.
`"data-ui-validator-live"`	String	<optional>	A value ('true' or 'false') indicating if the field validation is done while typing.
`"data-ui-validator-getValue"`	String	<optional>	A custom method to get the field value.
`"data-ui-validator-required-msg"`	String	<optional>	Denotes an element as required validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-required-when"`	String	<optional>	The method name that returns a boolean value to determines whether the field is required (true) or not (false).
`"data-ui-validator-datatype-msg"`	String	<optional>	Denotes an element as datatype validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-datatype-datatype"`	componyx.UI.Validator.DataTypeOption	<optional>	The data-type to which the field value must comply.
`"data-ui-validator-length-msg"`	String	<optional>	Denotes an element as length validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-length-min"`	String	<optional>	The minimum length to which the field value must comply.
`"data-ui-validator-length-max"`	String	<optional>	The maximum length to which the field value must comply.
`"data-ui-validator-range-msg"`	String	<optional>	Denotes an element as range validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-range-min"`	String	<optional>	The minimum value to which the field value must comply.
`"data-ui-validator-range-max"`	String	<optional>	The maximum value to which the field value must comply.
`"data-ui-validator-regex-msg"`	String	<optional>	Denotes an element as regex validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-regex-pattern"`	String	<optional>	The pattern to which the field value must comply.
`"data-ui-validator-compare-msg"`	String	<optional>	Denotes an element as compare validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-compare-fields"`	String	<optional>	The comparison field(s) with which the field value will be compared.
`"data-ui-validator-compare-operators"`	String	<optional>	The comparison operator(s) for the comparison field validation.
`"data-ui-validator-custom-msg"`	String	<optional>	Denotes an element as custom validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-custom-onValidation"`	String	<optional>	The event handler to invoke when the field is validated.
`"data-ui-validator-ajax-msg"`	String	<optional>	Denotes an element as ajax validation field with the attribute value as message to display if validation fails.
`"data-ui-validator-ajax-onBeforeValidation"`	String	<optional>	The event handler to invoke before the field is validated on the server.
`"data-ui-validator-ajax-onAfterValidation"`	String	<optional>	The event handler to invoke after the field is validated on the server.

OnAfterValidation(sender, args)

Parameters:

Name	Type	Description
`sender`	componyx.UI.Validator
`args`	ValidationArgs

OnBeforeValidation(sender, args) → {Array.<ValidationData>}

Parameters:

Name	Type	Description
`sender`	componyx.UI.Validator
`args`	ValidationArgs

Returns:

The validation data.

Type: Array.<ValidationData>

OnValidation(sender, args) → {boolean}

Parameters:

Name	Type	Description
`sender`	componyx.UI.Validator
`args`	ValidationArgs

Returns:

A value indicating if the validation result is valid or invalid.

Type: boolean

ValidationArgs

Type:

object

Properties:

Name	Type	Attributes	Description
`field`	HTMLElement	<optional>	The field.
`fieldName`	string	<optional>	The field name.
`fieldValue`	string	<optional>	The field value.
`feedbackId`	string	<optional>	The field feedback identifier.
`settings`	object	<optional>	The validation settings of the field.