Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "validators"

Index

Variables

Functions

Variables

Const areFieldsEqual

areFieldsEqual: IValidationVariable = customValidator((fieldKey, fieldValue, context: IFormContext) => {let testField: IFieldBase;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, _) => {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

Const isValidDate

isValidDate: IValidationVariable = customValidator((args: [string, string], fieldValue: Date, _) => {let isValid = false;if (!fieldValue) {return [`Must be a valid date`];}if (!args || !args.length) {throw new _DateValidatorArgsError(_DateValidatorArgsErrorMsg);}const [from, to] = args;const fromDate = from ? new Date(from) : null;const toDate = to ? new Date(to) : null;if (fromDate && toDate) {if(fieldValue > fromDate && fieldValue < toDate) {isValid = true;}}if(!isValid) {return [`Must be a valid date`];}})

To use the isValidDate pass in an array containing either a from or to date string OR both OR none.

example
   <DatePickerField
       value={fpState.date}
       name="date"
       // Optional validators
       validators={[isValidDate(["2021-01-10", "2021-03-10"])]}
   />
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