Table of Content



Documentation will be available soon


<r-input />rInputEmitted immediately after components value change.
  • element: HTMLRInputElement
  • value: any
rChangeEmitted if components value changes after element loses focus.
rResetOccurs when a form is reset (resets component’s value to initial).
rClickIconEmitted when click on the icon within input occurs.
rValidateEmitted 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

  1. Apply validity-related type if necessary: type="email", type="number", etc.
  2. 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:

  value-missing-message="Value is missing."

Switch validation off

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

  1. novalidate attribute passed to the form:
    <form novalidate ...>;
  2. 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.

    value="An example"

Text of an error message provided could be provided by

  1. indicating invalid state by passing invalid prop
  2. passing text of the message as text value to error prop.
    value="An example"
    error="Description of an error"

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

  1. valid as an indication that value of the field passes validation;
  2. valid-marker as allowance for visual indication to be shown;
  value="An example"