Input

Usage

Development

Documentation will be available soon

Events

Component	Event	Description	Details
`<r-input />`	`rInput`	Emitted immediately after components value change.	element: HTMLRInputElement value: any
	`rChange`	Emitted if components value changes after element loses focus.
	`rReset`	Occurs when a form is reset (resets component’s `value` to initial).
	`rClickIcon`	Emitted when click on the icon within input occurs.	—
`rValidate`	Emitted after validation of element with Constraint Validation API.	—

Validation API

By default r-input validation is on and uses Constraint Validation API. It’s a default way modern browsers provide to deal with data validation without creating any validation function aside.

Using built-in form validation requires usage of attributes supported by validation engine.

How to apply

Apply validity-related type if necessary: type="email", type="number", etc.
Apply validity-related attributes: required, maxlength, minlength, max, min, pattern, step.

As described by mdn:

required: Specifies whether a form field needs to be filled in before the form can be submitted.
minlength and maxlength: Specifies the minimum and maximum length of textual data (strings).
min and max: Specifies the minimum and maximum values of numerical input types.
type: Specifies whether the data needs to be a number, an email address, or some other specific preset type.
pattern: Specifies a regular expression that defines a pattern the entered data needs to follow.

There are two things Riverty components provide on top of existing API:

unified visual appearance according to Riverty Design System;
an ability to pass custom messages (per state) for any invalid state;

Validation messages

Validation messages will be displayed according to ValidityState:

badInput
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valueMissing

Custom validation message could be displayed by providing prop named as a combination of ValidityState name and a word message:

<r-input
  type="text"
  required
  value-missing-message="Value is missing."
/>

Switch validation off

To stop application of Constraint Validation API one of two options must be applied:

novalidate attribute passed to the form:
<form novalidate ...>;
formnovalidate property passed to submitting image, input or button:
<input type="submit" formnovalidate ...>

Visual validation indication

There is a way to visually indicate validity states and provide validity-related messages without Constraint Validation API being used.

By adding invalid prop invalid state indication will be provided.

  <r-input
    type="text"
    value="An example"
    invalid
  />

Text of an error message provided could be provided by

indicating invalid state by passing invalid prop
passing text of the message as text value to error prop.

  <r-input
    type="text"
    value="An example"
    invalid
    error="Description of an error"
  />

To indicate valid state visually two boolean props must be provided:

valid as an indication that value of the field passes validation;
valid-marker as allowance for visual indication to be shown;

<r-input
  type="text"
  value="An example"
  valid
  valid-marker
/>

Home