@antify/validate NPM

Antify Validate

Use one validation for client and server side.

Features

Validation for client and server side
Validation per field, custom group or all fields
Validation for nested objects
Fully typed
Ships with predefined validation rules (See here)
Ships with predefined and translated error messages

Installation

pnpm i @antify/validate

Usage

import { validate } from '@antify/validate';

export type Car = {
  id: string | null
  model: string | null
  manufacturer: string | null
  type: string | null
  color: string | null
  engine: {
    type: string | null
    volumeInLiter: number | null
    powerPs: number | null
  }
};

export const validator = useValidator<Car>({
  id: {
    rules: [(val: any) => isTypeOfRule(val, Types.STRING)],
    groups: ['client']
  }
})

Client side (Vue example)

<script lang="ts" scoped>
  import {ref, reference} from 'vue';
  import {validator} from './validator';

  const validatorRef = reference(validator);
  const car = ref({
    id: '1',
    model: null,
    manufacturer: null,
    type: null,
    color: null,
    engine: {
      type: null,
      volumeInLiter: null,
      powerPs: null
    }
  });
  
  function submit() {
    validatorRef.validate(car.value);

    if (validatorRef.hasErrors()) {
      return;
    }

    // submit
  }
</script>

<template>
  <form @submit.prevent="submit">
    <div v-if="validatorRef.hasErrors()">
      There are some errors to fix: <br>
      
      <div style="white-space: pre">{{ validatorRef.getErrorsAsString() }}</div>
    </div>
    
    <div>
      <label>{{ validatorRef.fieldMap.model.readableName }}</label>
      <input v-model="car.model" @blur="validatorRef.fieldMap.model.validate()"/>
      <span v-if="validatorRef.fieldMap.model.hasErrors()">{{ validatorRef.fieldMap.model.getErrors() }}</span>
    </div>
    
    <button>Submit</button>
  </form>
</template>

Server side

import {validator, type Car} from './validator';

const car: Car = {
  id: '1',
  model: 'A4',
  manufacturer: 'Audi',
  type: 'Sedan',
  color: 'Black',
  engine: {
    type: 'Gasoline',
    volumeInLiter: 2.0,
    powerPs: 150
  }
};

const validatedData = validator.validate(car);

if (validator.hasErrors()) {
  throw new Error(validator.getErrorsAsString());
}

// Save data

Transformer

You can use a transformer to transform the data before validation. A reusable list of transformers you can find here.

Example

import { validate, useValidator } from '@antify/validate';

export const queryValidator = useValidator({
  page: {
    transform: stringToNumberTransformer,
    rules: [(val: any) => isTypeOfRule(val, Types.NUMBER)]
  }
})

const data = queryValidator.validate({ page: '1' });

// data.page === 1
// Rule will be successful

Write your own transformer

import {validate, useValidator} from '@antify/validate';

export const queryValidator = useValidator({
  isAdmin: {
    transform: (val) => {
      if (typeof val === 'boolean' || val === 'true') {
        return !!val
      }

      if (val === 'false') {
        return false
      }

      return val
    },
    rules: [(val: any) => isTypeOfRule(val, Types.BOOLEAN)]
  }
})

const data = queryValidator.validate({isAdmin: 'true'});

// data.isAdmin === true
// Rule will be successful