Error

Basics

The error component lets your form to display meaningful messages to the user when a form element doesn't satisfy its validation policy (here for validation info).

The whole logic is handled internally by Kingpin itself soo you don't have to manually show the error.

Props

Name	Mandatory	Purpose
name	true	The name which points to the related input. The name has to follow the pattern: {componentName}:{error}
children	true	The JSX element to show.

Typescript

import { Error, Form, Input } from 'kingpin-react-form'

const shouldNotBeEmpty = (s: string): boolean => s.length > 0

function App(): JSX.Element {
  return (
    <Form onSubmit={submit}>
      <Input name="email" type="email" validation={shouldNotBeEmpty} />
      <Error name="email:error">
        <p>Email should not be empty.</p>
      </Error>
      <button type="submit">Submit</button>
    </Form>
  )
}

Javascript

import { Error, Form, Input } from 'kingpin-react-form'

const shouldNotBeEmpty = (s) => s.length > 0

function App() {
  return (
    <Form onSubmit={submit}>
      <Input name="email" type="email" validation={shouldNotBeEmpty} />
      <Error name="email:error">
        <p>Email should not be empty.</p>
      </Error>
      <button type="submit">Submit</button>
    </Form>
  )
}

Validation solutions

The validation system offer many different ways to show the error messages. Check the documentation for more about error displaying.