Input

Events

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