@logicroom/validator

Validator

This is the validation script for The Clean Architecture (JavaScript)

Getting Started

  npm install --save @logicroom/validator

or

  yarn add @logicroom/validator

Purpose

The purpose of the Logic Room Validator is simplify adding validation and change handling to form inputs when using Mobx. The library exposes two new classes GenericFormInputPresenter and GenericFormPresenter. The former provides an intelligent form input API that can be extended to create view model code for any form input (e.g a TextInput). The latter is for grouping these inputs into a form and provides form level attributes and methods.

GenericFormInputPresenter

API

You create a new form input by newing up the class:

import { GenericFormInputPresenter } from '@logicroom/validator'
const emailInput = new GenericFormInputPresenter<string>('[e-mail]')

In the above example, a new text input has been created. We've told the GenericFormInputPresenter that the initial value is '[e-mail]'. We've also said that the value is of type 'string' passed as a generic in <string>.

This gives us access to the following properties and methods on the emailInput instance. All properties are observable via Mobx.

Name	Property/Method	Value	Default	Type
value	Property	current value of input	initial value provided at construction	generic (provided at construction)
isValid	Property	whether the current value passes all current validation rules	true	boolean
errorMessages	Property	a list of messages for all currently non-passing rules	[]	string[]
isDirty	Property	whether value has been changed via onChange handler	false	boolean
disabled	Property	whether the form input is disabled	false	boolean
required	Property	whether the form input is required	false	boolean
onChange	Method	the function to call to update the value (to be bound in the view layer)		(newValue: T) => void
withMiddleware	Method	this adds a middleware that can be used to access and manipulate the value coming into onChange before it gets set to value (e.g. v => v.toUpperCase())		(newValue: T) => T
reset	Method	sets the value and isDirty back to their defaults		() => void
addCustomRule	Method (fluent)	use this method to add a custom validation rule		(condition: (value: T) => boolean, errorMessage?: string) => this
mustBeEmail	Method (fluent)	value must conform to the General Email Regex found here	unset	(errorMessage?: string) => this
mustBeTrue	Method (fluent)	value must be true	unset	(errorMessage?: string) => this
mustBeBool	Method (fluent)	value must be true or false	unset	(errorMessage?: string) => this
mustBeString	Method (fluent)	value must be of type string	unset	(errorMessage?: string) => this
mustBeNumberPrimitive	Method (fluent)	value must be of type number	unset	(errorMessage?: string) => this
mustBeNumber	Method (fluent)	value must be of type number or valid number string (e.g. '55')	unset	(errorMessage?: string) => this
minLength	Method (fluent)	value must have length equal or greater than provided number	unset	(length: number, errorMessage?: string) => this
maxLength	Method (fluent)	value must have length equal or less than provided number	unset	(length: number, errorMessage?: string) => this
isRequired	Method (fluent)	value must be populated	unset	(errorMessage?: string) => this
isDisabled	Method (fluent)	input is disabled	unset	() => this

Examples

Creation

const emailInput = new GenericFormInputPresenter<string>('[e-mail]')
  .mustBeEmail()
  .isRequired()

Update value

emailInput.onChange('[e-mail]`)

Check validity

const emailInput = new GenericFormInputPresenter<string>('[e-mail]')
  .mustBeEmail('Your email address is not valid')
  .isRequired()

console.log(emailInput.isValid)
// true

emailInput.onChange('qwerty')

console.log(emailInput.isValid)
// false

console.log(emailInput.errorMessages)
// ['Your email address is not valid']

GenericFormPresenter

API

You create a new form by newing up the class:

import {
  GenericFormInputPresenter,
  GenericFormPresenter
} from '@logicroom/validator'

// first we create the input(s) that will be used by the form
const emailInput = new GenericFormInputPresenter<string>('[e-mail]')

// then we create the form and add our form input(s)
const myForm = new GenericFormPresenter().addFormInput(emailInput)

In the above example a new form is created with GenericFormPresenter. We've told our form that it has one form input (emailInput). The below table describes the properies and methods available on myForm.

Name	Property/Method	Value	Default	Type
isDirty	Property	form is dirty if any of the inputs are dirty	false	boolean
isValid	Property	form is valid if all of the inputs are valid and no server errors exist	true	boolean
serverErrors	Property	set server errors to indicate validation errors that have been returned server side validation	[]	string[]
errorMessages	Property	any server errors concatanated with any errors from invalid form inputs	[]	string[]
addFormInput	Method (fluent)	call this method to add a form input to this form		(input: GenericFormInputPresenter) => this
resetForm	Method	call this method to reset each input in the form		() => void

Examples

Creation

const emailInput = new GenericFormInputPresenter<string>('')
const passwordInput = new GenericFormInputPresenter<string>('')

const myForm = new GenericFormPresenter()
  .addFormInput(emailInput)
  .addFormInput(passwordInput)

Reset Form

const emailInput = new GenericFormInputPresenter<string>('intial')
const passwordInput = new GenericFormInputPresenter<string>('')

const myForm = new GenericFormPresenter()
  .addFormInput(emailInput)
  .addFormInput(passwordInput)

emailInput.onChange('foo')

console.log(emailInput.value)
// 'foo'

myForm.reset()

console.log(emailInput.value)
// 'intial'

Form validity / server errors

const emailInput = new GenericFormInputPresenter<string>(
  '[e-mail]'
).mustBeEmail('Must be email')

const myForm = new GenericFormPresenter().addFormInput(emailInput)

console.log(myForm.isValid)
// true

emailInput.onChange('not an email')

console.log(myForm.isValid)
// true

console.log(myForm.errors)
// ['Must be email']

myForm.serverErrors.push('Email not found, please register first')

console.log(myForm.errors)
// ['Must be email', 'Email not found, please register first']