https://github.com/coffezilla/react-bhx-form
Simple form with validation in ReactJS and Typescript - create-react-app
https://github.com/coffezilla/react-bhx-form
form form-react form-validation javascript reactjs submit-form typescript validation-form
Last synced: about 2 months ago
JSON representation
Simple form with validation in ReactJS and Typescript - create-react-app
- Host: GitHub
- URL: https://github.com/coffezilla/react-bhx-form
- Owner: coffezilla
- Created: 2021-09-02T03:52:06.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-14T21:56:52.000Z (over 3 years ago)
- Last Synced: 2025-04-15T01:13:39.685Z (about 2 months ago)
- Topics: form, form-react, form-validation, javascript, reactjs, submit-form, typescript, validation-form
- Language: TypeScript
- Homepage: https://react-bhx-form.netlify.app
- Size: 537 KB
- Stars: 6
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-bhx-form
This form is a very useful project for all kinds of usage in ReactJS projects. Was made using create-react-app and Typescript for a better implementation.
## Feat
- Typescript
- ReactJS ( sample was made using create-react-app )
## How to use
To use this form, put the component folder (FormValidation) inside your project component's folder.
Now, you can import a function for validation and the interface (typescript) to deal with useEffects type.
```tsx
import { useState } from 'react';
import { validateForm, IForm } from './components/FormValidation';
```
```tsx
const [formFields, setFormFields] = useState([
{
name: 'name',
value: '',
error: '',
type: 'text',
isRequired: true,
},
]);
```
```tsx
// validation of the form
const validationForm = () => {
const inputRequired = validateForm(formFields, setFormFields);
const hasNoErrors = inputRequired.hasPassed;
return hasNoErrors;
};
// generic handle for inputs
const handleChange = (e: any) => {
const isCheckBox = e.target.type === 'checkbox';
let currentValue = e.target.value;
// OPTIONAL: clean spaces
if (
e.target.name === 'nickname' ||
e.target.name === 'password' ||
e.target.name === 'passwordConfirm' ||
e.target.name === 'phone'
) {
currentValue = currentValue.replace(/\s/g, '');
currentValue = currentValue.toLowerCase();
}
setFormFields(
formFields.map((field: any) => {
if (field.name === e.target.name) {
return {
...field,
value: isCheckBox ? e.target.checked : currentValue,
error: '',
};
}
return { ...field };
}),
);
};
// submit handle
// if isValid so you can submit the form
const handleSubmit = (e: any) => {
e.preventDefault();
const isValid = validationForm();
if (isValid) {
// use async function for server validation
alert('SUBMITED!!!');
}
};
```
Set your html
```tsx
Name:
{formFields[0].error}
Submit Form
```
In order to make everything work properly you have to set your input following the index number used in your useState.
## Error message
```html
{formFields[0].error}
```
## Inside view - @types
```tsx
type inputTypes =
| 'text'
| 'select'
| 'radio'
| 'checkbox'
| 'textarea'
| 'email'
| 'password'
| 'tel';
interface IInput {
name: string;
value: string;
error: string;
type: inputTypes;
maxLength?: number;
minLength?: number;
isEqual?: boolean | string;
isRequired?: boolean;
}
export interface IForm {
inputs: IInput[];
}
```
## View
