a form state manager
Note: Make sure to create all validation logic on a global scope. Thank you.
First Create a global file.. example validation.tsx using typescript paste the following code
import { GInputs, ImageFileAll, ValidationSet } from '../clazzes/ValidatorSet';
//this validation is set for an input with name fname
//must be an image file
//a mutiple file
export const MyFormValidation: GInputs[] = [ValidationSet.file('fname', ImageFileAll)];
Now inside your App.tsx
/* @ts-ignore */
import React, { useContext, useEffect, useState } from 'react';
import { validate } from '../clazzes/ValidatorSet';
import { MyFormValidation } from './validations';
const App = () => {
const [error, setErrors] = useState<{} | null>(null);
return (
<>
<form name="myForm">
<input type="file" multiple name="fname" placeholder="Your first Name" />
{/* @ts-ignore */}
{error && error.fname && <small>{error.fname[0]}</small>}
<button
onClick={(ev) => {
ev.preventDefault();
//call the validation on submit
//param form name atttribute passed here
//validation created previously passed here
const validation = validate('myForm', MyFormValidation);
setErrors(validation.errors);
}}
>
Submit
</button>
</form>
</>
);
};
export default App;
npm run dev for vite
npm start for create-react-app
ValidationSet.file("inputName",ImageFileAll,"errorOptional") // input name, media type, optional error parameter
ValidationSet.required("inputName","errorOptional") // input name, optional error parameter
ValidationSet.min("inputName",min,"errorOptional") // input name, min number, optional error parameter
ValidationSet.max("inputName",max,"errorOptional") // input name, max number, optional error parameter
ValidationSet.email("inputName","errorOptional") // input name, optional error parameter
ValidationSet.phone("inputName", countryCode, areaCode, numberLength,"errorOptional") // input name, media type, countryCode: number, areaCode: number[], numberLength: number, optional error parameter
ValidationSet.url(name: string, error: string = 'invalid url')
ValidationSet.range(name: string, start: number, end: number, error?: string )
ValidationSet.address(name: string, error?: string)
ValidationSet.file(name: string, mimeType: string[], error?: string)
//mimeType can be any of the following array
ImageFileAll
ImageFileTransparent
ImageFileOpaque
ImageFileGif
//you can create your own mimeType
Samuel Clinton