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>('[email protected]')

In the above example, a new text input has been created. We've told the GenericFormInputPresenter that the initial value is '[email protected]'. 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>('[email protected]')
  .mustBeEmail()
  .isRequired()

Update value

emailInput.onChange('[email protected]`)

Check validity

const emailInput = new GenericFormInputPresenter<string>('[email protected]')
  .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>('[email protected]')

// 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>(
  '[email protected]'
).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']