smart-html-elements

Validator — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Validator - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smartValidator id="demo-validator"></smartValidator>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.validator.js';

    const el = document.getElementById('demo-validator');
    if (el) {

      el.rules = [
        { input: '#email', type: 'email', message: 'Please enter a valid email' },
        { input: '#name', type: 'required', message: 'Name is required' }
      ];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>

For AI tooling

Developer Quick Reference

Component: Validator Framework: JavaScript Selector: smartValidator

API counts: 2 properties, 2 methods, 0 events

Common properties: 0, 1

Common methods: reset(), validate()

Common events: n/a

Module hint: smart-webcomponents/source/modules/smart.validator.js

Validator plug-in is used to validate form elements.

Class

Validator

Validator plug-in is used to validate form elements.

Properties

rules Click for more details. Property object's options:
[]

Properties

Try a demo showcasing the rules property.

Examples

Markup and runtime examples for rules:

HTML:

<smartValidator rules=""></smartValidator>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smartValidator');
el.rules = "";

Read the current value:

const el = document.querySelector('smartValidator');
const rules = el.rules;

actionA comma-separated list of events to validate the input(s) on.string

A comma-separated list of events to validate the input(s) on.

Default value

Back to root property: rules

Try a demo showcasing the action property.

Read the nested value:

const el = document.querySelector('smartValidator');
const action = el.rules[0].action;

comparisonTargetA callback function whose result to compare to the input value by the comparisonType in order to show the validation message. Applicable when type is 'compare'.{ (inputElement: any, rule: ValidatorRule): any }

A callback function whose result to compare to the input value by the comparisonType in order to show the validation message. Applicable when type is 'compare'.

Default value

Back to root property: rules

Try a demo showcasing the comparisonTarget property.

Read the nested value:

const el = document.querySelector('smartValidator');
const comparisonTarget = el.rules[0].comparisonTarget;

comparisonTypeAn operator to compare the input value by with the result of comparisonTarget in order to show the validation message. Applicable when type is 'compare'.string

An operator to compare the input value by with the result of comparisonTarget in order to show the validation message. Applicable when type is 'compare'.

Default value

"=="

Back to root property: rules

Try a demo showcasing the comparisonType property.

Read the nested value:

const el = document.querySelector('smartValidator');
const comparisonType = el.rules[0].comparisonType;

inputA valid CSS selector of the input(s) to validate.string

A valid CSS selector of the input(s) to validate.

Default value

Back to root property: rules

Try a demo showcasing the input property.

Read the nested value:

const el = document.querySelector('smartValidator');
const input = el.rules[0].input;

maxThe max value of an input when the rule type is 'stringLength' or the max number of characters in the input's value when the rule type is 'range'.number | Date

The max value of an input when the rule type is 'stringLength' or the max number of characters in the input's value when the rule type is 'range'.

Default value

Back to root property: rules

Try a demo showcasing the max property.

Read the nested value:

const el = document.querySelector('smartValidator');
const max = el.rules[0].max;

messageA message to display on focus of the input and in the validation summary if the input's value is not valid.string

A message to display on focus of the input and in the validation summary if the input's value is not valid.

Default value

Back to root property: rules

Try a demo showcasing the message property.

Read the nested value:

const el = document.querySelector('smartValidator');
const message = el.rules[0].message;

minThe min value of an input when the rule type is 'stringLength' or the min number of characters in the input's value when the rule type is 'range'.number | Date

The min value of an input when the rule type is 'stringLength' or the min number of characters in the input's value when the rule type is 'range'.

Default value

Back to root property: rules

Try a demo showcasing the min property.

Read the nested value:

const el = document.querySelector('smartValidator');
const min = el.rules[0].min;

patternA regular expression the input's value must match when the rule type is 'pattern'.RegExp

A regular expression the input's value must match when the rule type is 'pattern'.

Default value

Back to root property: rules

Try a demo showcasing the pattern property.

Read the nested value:

const el = document.querySelector('smartValidator');
const pattern = el.rules[0].pattern;

typeThe type of validation the rule makes."compare" | "custom" | "email" | "notNumber" | "numeric" | "pattern" | "phone" | "range" | "required" | "startWithLetter" | "stringLength" | "zipCode"

The type of validation the rule makes.

Allowed Values

"compare" - The comparison of the input's value and the result of the rule's comparisonTarget by the rule's comparisonType must return true.
"custom" - The input's value is validated in the rule's validationCallback function.
"email" - The input's value must be a valid email.
"notNumber" - The input's value must not be a number.
"numeric" - The input's value must be a number.
"pattern" - The input's value must match the rugular expression provided by the rule's pattern.
"phone" - The input's value must be a valid phone number.
"range" - The input's value must be between the values of the rule's min and max.
"required" - The input is required to have a non-empty value.
"startWithLetter" - The input's value must start with a letter.
"stringLength" - The number of characters in the input's value must be between the values of the rule's min and max.
"zipCode" - The input's value must be a valid ZIP Code.

Default value

"required"

Back to root property: rules

Try a demo showcasing the type property.

Read the nested value:

const el = document.querySelector('smartValidator');
const type = el.rules[0].type;

validationCallbackA callback function to validate the input's value by when the rule's type is 'custom'.{ (inputElement: any): boolean }

A callback function to validate the input's value by when the rule's type is 'custom'.

Default value

Back to root property: rules

Try a demo showcasing the validationCallback property.

Read the nested value:

const el = document.querySelector('smartValidator');
const validationCallback = el.rules[0].validationCallback;

validationSummarySelectorSpecifies a valid CSS selector that identifies the HTML element on the page which will serve as the container for displaying validation error messages. This selector determines where the error messages will appear within the user interface.string

Specifies a valid CSS selector that identifies the HTML element on the page which will serve as the container for displaying validation error messages. This selector determines where the error messages will appear within the user interface.

Default value

Examples

Markup and runtime examples for validationSummarySelector:

HTML:

<smartValidator validation-summary-selector=""></smartValidator>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smartValidator');
el.validationSummarySelector = "";

Read the current value:

const el = document.querySelector('smartValidator');
const validationSummarySelector = el.validationSummarySelector;

Methods

reset(): voidRemoves all error messages from the current context, ensuring that no error notifications are displayed to the user. This action resets the error state, allowing for a clean user experience without residual error indicators.

Removes all error messages from the current context, ensuring that no error notifications are displayed to the user. This action resets the error state, allowing for a clean user experience without residual error indicators.

On the custom element in the DOM (narrow the selector, e.g. to #my-validator, if you host multiple widgets):

document.querySelector('smartValidator')?.reset();

Try a demo showcasing the reset method.

validate( result?: Function): voidDisplays the drop-down menu, making its list of options visible to the user.

Displays the drop-down menu, making its list of options visible to the user.

Arguments

result?Function

A callback function to call when validating inputs.

On the custom element in the DOM (narrow the selector, e.g. to #my-validator, if you host multiple widgets):

document.querySelector('smartValidator')?.validate();

Try a demo showcasing the validate method.