Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "validators"

Index

Variables

Const areFieldsEqual

areFieldsEqual: IValidationVariable = customValidator((fieldKey, fieldValue, context: IFormContext) => {let testField: IField;let message = [`Fields do not match`];let contextState = getFormStateFromContext(context);if(fieldKey in contextState) {testField = contextState[fieldKey];if(!testField || !fieldValue || fieldValue !== contextState[fieldKey]) {return message;}} else {throw new Error(`React-BareForms Error: No Field with name of ${fieldKey} exists when calling 'areFieldsEqual' `+ `validator function.\n For more info, visit: `+ `https://joegasewicz.github.io/react-bare-forms/modules/_validators_.html#arefieldsequal`,);}})

The passwordKey is normally the first password form field the user fills in before then confirming that the password is correct with a confirm password field. this validator check that both password fields are equal or else will return an error message and set this field to invalid.`

example
 <PasswordField
     // other props...
     name="myPassword"
 />

 <ConfirmPasswordField
       // other props...
       validators={[areFieldsEqual("myPassword")]}
  />
  // message: Fields do not match
param

The name of the password form element you watch to match against

function

Const isChecked

isChecked: IValidationVariable = customValidator((_, fieldValue, context) => {if(fieldValue === false) {return [`Must be checked`];}})

The isChecked validator will display a warning if the user has selected the checkbox & then deselected it. This requires a boolean type to be set in your state, see below. This validator doesn't require any arguments to be passed in.

example

import {CheckBoxField, isChecked} from "react-base-forms"

const state = { terms: false }

function

Const isEmailValid

isEmailValid: IValidationVariable = customValidator((_ , fieldValue, context) => {const isValid = EMAIL_REGEX.test(String(fieldValue).toLowerCase());if(!isValid) {return [`Must be a valid email`];}})

This validator doesn't require any arguments to be passed in.

example

import {EmailField, isEmailValid} from "react-base-forms"

const state = { terms: false }

 <EmailField
   // other props...
   validators={[isEmailValid()]}
 />
 // message: Must be a valid email
function

Const isFieldEmpty

isFieldEmpty: IValidationVariable = customValidator((minLength, fieldValue, context: IFormContext) => {const isValid = (typeof fieldValue !== "undefined" && fieldValue.length >= minLength);if(!isValid) {return [`Must be at least ${minLength} characters`];}})

The isFieldEmpty validator performs a comparison against minLength & the field element value. If they are equal or the minLength is greater than the form element value then this element is not valid & a message is displayed.

example

import {TextInputField, isFieldEmpty} from "react-base-forms"

const state = { username: "" }

 <TextInputField
       value={state.username}
       name="username"
       validators={[isFieldEmpty(5)]}
  />
  // message: Must be at least 5 characters
param

The minimum length of the form field value

function

Const isFile

isFile: IValidationVariable = customValidator((_, name, context) => {if(!name) {return [`Must be a file type`];}})

This validator will display the warning if a user has selected a file but then reselected nothing (by clicking the cancel button in the file popup window). This validator doesn't require any arguments to be passed in.

example
import {createFileRef, FileField, isFile} from "react-bare-forms";

const myFileRef = createFileRef();

<FileField
   ref={myFileRef}
   hint="Must be a file"
   labelText="Upload your file"
   name="myFileTest"
   validators={[isFile()]}
/>
function

Const isRadioChecked

isRadioChecked: IValidationVariable = customValidator((_ , value, context) => {if(!value) {return [`This option must be selected`];}})

To use the isRadioChecked, select the RadioField component you wish the user to select & add the validator function to the validators prop. This will now display a warning if the user has deselected the required option. This validator doesn't require any arguments to be passed in.

example

import {RadioGroup, RadioField} from "react-base-forms"

const state = { male: true, female: false }

function

Functions

customValidator

  • customValidator(callback: ICustomValidatorCallback): (arg: any) => IValidationFunction
  • Function that takes a callback which contains the callers own validation logic & returns an array of string(s) which are the validation error message or undefined. Below is an example of creating a custom validator to test if a field has a string length of nth.

    There are 3 arguments available to your custom validation callback:

    • arg This is the your own value used to in the validation comparison
    example
     const myArg = 5;`
    
     <TextInputField
       // other props...
       validators={[myValidator(myArg)]} // <- `myArg`
     />
    • fieldValue This is the current form element value being passed to the validator
    • context This is the context object that contains the state For example:
    example
    const isFieldEmpty = createValidator((minLength, fieldValue, context) => {
        const isValid = (fieldValue.length >= minLength);
        if(!isValid) {
            return [`Must be at least ${minLength} characters`];
        }
    });

    You only need to return type an array of string(s) (which is your validation message) if the fieldValueis NOT validated.

    function

    Parameters

    • callback: ICustomValidatorCallback

    Returns (arg: any) => IValidationFunction

      • (arg: any): IValidationFunction
      • Parameters

        • arg: any

        Returns IValidationFunction

getFormStateFromContext

  • Helper function to get correct state from the context object within a validator:

    • arg context {IFormContext}
    example
     let contextState = getFormStateFromContext(context);
    function

    Parameters

    Returns any

Generated using TypeDoc