Table of Content

Events

ComponentEventDescriptionDetails
<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:

<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:

  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.

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

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.
  <r-input
    type="text"
    value="An example"
    invalid
    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;
<r-input
  type="text"
  value="An example"
  valid
  valid-marker
/>