Validation Library with Typescript

https://github.com/canerdemirci/cnr-validation

Validation in programming is a crucial process that ensures the accuracy and reliability of data input and output. It involves checking the validity of data against predefined rules and constraints. For instance, validating a user's email address might include ensuring it adheres to a specific format, such as "[email address removed]". By implementing validation techniques, developers can prevent errors, improve user experience, and maintain data integrity within their applications.

I have written a validation library in TypeScript for Node.js. I have also written tests for the library. There are currently two rule classes in the library: one for strings and one for numbers. These classes do type checking in their constructor and have various property functions that validate the class’s value. These functions return their class so that functions can be chained. If the value is not valid, they return an error. Errors are customizable. There is also a class called Validation. This class takes a validation model and, when you validate the model, it returns validation results.

I know there are professional packages for validation, but I wanted to create my own for TypeScript practice. I found opportunities to use TypeScript types, interfaces, and abstract classes. The package is open for development. I would like to add more validation methods, such as phone, IP, and URL, but I don't have time right now. Research is needed for these validations because each one has different formats, and the standards vary from country to country.

Example Using of the Package

import { useEffect, useState } from 'react'
import { NumberRule, StringRule, Validation, ValidationModel, ValidationResult } from 'cnr-validation'
import './App.css'
import { RiErrorWarningFill } from 'react-icons/ri'

function App() {
  const validationModel: ValidationModel = {
    name: () => new StringRule(name).required().min(5).max(10).endsWith('er'),
    age: () => new NumberRule(age).required().min(18).max(120),
    email: () => new StringRule(email).required().email(),
    bio: () => new StringRule(bio).max(100)
  }

  const [name, setName] = useState<string>('')
  const [age, setAge] = useState<number>(18)
  const [email, setEmail] = useState<string>('')
  const [bio, setBio] = useState<string>('')
  const [validationResult, setValidationResult] = useState<ValidationResult>(validate())

  useEffect(() => {
    setValidationResult(validate())
  }, [name, age, email, bio])

  function validate(): ValidationResult {
    return new Validation(validationModel).validate()
  }

  function handleFormSubmit(e: any) {
    e.preventDefault()

    for (let r in validationResult) {
      if (!validationResult[r].success) {
        alert('Form is not valid\n' + JSON.stringify({
          name: validationResult.name?.error?.message,
          age: validationResult.age?.error?.message,
          email: validationResult.email?.error?.message,
          bio: validationResult.bio?.error?.message,
        }))
        return
      }
    }

    alert('Form is valid\n' + JSON.stringify({
      name: name,
      age: age,
      email: email,
      bio: bio,
    }))
  }

  return (
    <div className="main-container">
      <header>
        <h2>VALIDATION TEST FORM</h2>
      </header>
      <form className="example-form" onSubmit={handleFormSubmit}>
        <div className="form-group">
          <div>
            <label htmlFor="name">Name</label>
            <div
              className="input-error-message"
              style={{ display: validationResult.name?.error?.message ? 'flex' : 'none' }}
            >
              <span>{validationResult.name?.error?.message}</span>
              <RiErrorWarningFill />
            </div>
          </div>
          <input type="text" name="name" id="name" value={name}
            onChange={(e: any) => setName(e.target.value)} />
        </div>
        <div className="form-group">
          <div>
            <label htmlFor="age">Age</label>
            <div
              className="input-error-message"
              style={{ display: validationResult.age?.error?.message ? 'flex' : 'none' }}
            >
              <span>{validationResult.age?.error?.message}</span>
              <RiErrorWarningFill />
            </div>
          </div>
          <input type="number" name="age" id="age" value={age}
            onChange={(e: any) => setAge(parseInt(e.target.value))} />
        </div>
        <div className="form-group">
          <div>
            <label htmlFor="email">Email</label>
            <div
              className="input-error-message"
              style={{ display: validationResult.email?.error?.message ? 'flex' : 'none' }}
            >
              <span>{validationResult.email?.error?.message}</span>
              <RiErrorWarningFill />
            </div>
          </div>
          <input type="text" name="email" id="email" value={email}
            onChange={(e: any) => setEmail(e.target.value)} />
        </div>
        <div className="form-group">
          <div>
            <label htmlFor="bio">Bio</label>
            <div
              className="input-error-message"
              style={{ display: validationResult.bio?.error?.message ? 'flex' : 'none' }}
            >
              <span>{validationResult.bio?.error?.message}</span>
              <RiErrorWarningFill />
            </div>
          </div>
          <textarea name="bio" id="bio" value={bio} rows={4}
            onChange={(e: any) => setBio(e.target.value)} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App

Tests of the Package

String type checking tests - [✔] - 6 test

String basic tests - [✔] - 25 test

String email tests - [✔] - 10 test

String custom tests - [✔] - 4 test

String rule chaining tests - [✔] - 7 test

Number type checking tests - [✔] - 9 test

Number tests - [✔] - 13 test

Custom number tests - [✔] - 1 test

Number rule chaining tests - [✔] - 5 test