validation-temp1

Validation temp

Usage no npm install needed!

<script type="module">
  import validationTemp1 from 'https://cdn.skypack.dev/validation-temp1';
</script>

README

Default Action Result

Represent the value that is returned in actions like (validation ....)

  export interface IFieldsRefs {
      field : string,
      ref : RefObject<any>
    } 


  export interface IPromiseValidationData<T> {
    error : boolean,  /** true,false - form currently valid or not( has validation error or not)*/
    data : T,  /** represent validated object values */
    validations ?: IValidationModel<T> /** validation state for object */
    refs ? : IFieldsRefs[]   /** ref of fields for control fields like focus...*/
  }

example:

 const submitHandler = async () => {
   const {error,data,validations,refs} = await validation.validate()
 }

Example: Client- Submit


Reset Validation

Reset validation, clear all errors and set all fields to not dirty.
declaration

   resetValidations : (clearData ?: boolean) => void

@param clearData
true : all value in form will be reset to defaultValue or undefined -> if there is no defaultValue for the field


Remove Data Array

Use function to remove from list that has to be validated

 const validation = useValidation(...)
...
  const someHandler =  () => { 
      const { removeArrayData } = useValidation
      removeArrayData(fieldParentName as string, index as number)
  }  

Example: Client- Address


Add Data Array

Add object in one array of model. Use this if validation has more then one of same list object to validate
@field - string path of array variable like ( address, person.address...)
@data - empty object of object with data that will be default one.


   addArrayData : (field : string, data : any) => Promise<IPromiseValidationData<T>>

   const data = await validation.addArrayData('person.address', {
      zip: "10000"
     })
 

Example: Client- Address


Set Field Value

Use function to remove from list that has to be validated

 const validation = useValidation(...)
...
  const someHandler =  () => { 
      const { removeArrayData } = useValidation
      removeArrayData(fieldParentName as string, index as number)
  }  

Example: Client- Address


Field Description
getFieldValue function that returns current value for the field from state (or undefined) getField('email')
setFieldValue set the value to dedicated field in state setField('company.address.zip','12345')
setFieldError set the error for field - this error will be valid error for that field ( error is set and validation will not pass until field value is changed) setField('person.firstName','User already exists')
setErrorGlobal set the error for complete model but not for particular field. Used when you get error from backend that can't be dedicated to any field, param can be string to be shown as error or just true like error exists
errorGlobal Value of error global that is set external, can be boolean,undefined,string , undefined or false - error not exists
state represent object of form
onBlurField function that should be called after particular field got onBlur event, make field dirty.
errorModel boolean value that shows is there one error on model
resetValidations Reset Validation
validate Validate
removeArrayData Remove Array Data
addArrayData Add Array Data
Set fields

Every input field can become a valid validation input field. Using HOC withValidation to encapsulate your component, that component becomes a component that can proceed validation.

({error,helperText,label,inputRef,value,...rest}) => {
 return (
    <div className= "form-group">
      <label className={error ? 'custom-label text-danger' : 'custom-label'}>{label}</label>
      <input
             className={`form-control ${error ? 'is-invalid' : ''}`}
             type="text"
             value={value}
             ref = {inputRef}
             {
                 ...rest
             }
      />
      { error ?  <small className="invalid-feedback custom-helper">{error}</small>  :
        (helperText ? <small className="custom-helper text-muted">{helperText}</small> : <small>&nbsp;</small>)
      }
    </div>

helper, label is user defined while inputRef ( React- ref object), value and error is provided by HOC ( withValidation) One have to implement to error ( string or true if validation error exists) and value represents current value for input

validation : {
    useValidation : IUseValidation<T> /** instance of validation hook */
    model : string    /** name of field in model (firstName, address.zip)
    defaultValue ?: string /** value that will be used for reset the form with data reseting */
    rule ? : IValidationFieldRules  /** object with validation rules */
    format ?: IFormatRuleProps /** format for field */
  }

import {
  minLength,
  required,
  useValidation
}                                  from 'easy-format-validation'
     ...


        const validation = useValidation()
          ...

        <MaterialTextFieldValidation
            label={'Last name'}
            helperText={'enter last name'}
            validation= {{
              useValidation: validation,
              model: 'lastName',
              rule: {
                required,
                minLength: minLength({
                  min: 2
                })
              }
            }}
        />