@falsy/forms NPM

Forms

How To Use It

import { Form } from 'forms';

<Form
	id="formId"
	fields={fields}
	onSubmit={onSubmit}
/>

Validation rules

required

{
  "type": "required",
  "rules": [
    {
      "message": "This field is required."
    }
  ]
}

mustbeequal

{
  "type": "mustbeequal",
  "rules": [
    {
      "value": true,
      "message": "You need to agree to the terms and conditions"
    }
  ]
}

inlist

{
  "type": "inlist",
  "rules": [
    {
      "value": ["Mr", "Mrs", "Ms", "Miss", "Dr", "Rev", "Prof"],
      "message": "Title was not a valid choice"
    }
  ]
}

maxlength

{
  "type": "maxlength",
  "rules": [
    {
      "value": 32,
      "message": "Your username can only have 3 - 32 characters"
    }
  ]
}

minlength

{
  "type": "minlength",
  "rules": [
    {
      "value": 3,
      "message": "Your username can only have 3 - 32 characters"
    }
  ]
}

pattern

{
  "type": "pattern",
  "rules": [
    {
      "value": "^[a-zA-Z]+",
      "message": "Your username can only start with a letter"
    },
    {
      "value": "^[a-zA-Z0-9\\-\\._]+[a-zA-Z0-9]$",
      "message": "Your username can only contain letters and numbers"
    }
  ]
}

notpattern

{
  "type": "notpattern",
  "rules": [
    {
      "value": "[\\-\\.\\_][\\-\\.\\_]",
      "message": "Your username can only contain letters and numbers"
    }
  ]
}

mustmatch

{
  "type": "mustmatch",
  "rules": [
    {
      "value": "password",
      "message": "The passwords you entered didn't match. Please try again"
    }
  ]
}

mustmatchcaseinsensitive

{
  "type": "mustmatchcaseinsensitive",
  "rules": [
    {
      "value": "email",
      "message": "Sorry, your email addresses do not match. Please try again"
    }
  ]
}