https://github.com/mehmet-github06/react-form-input

This project contains a simple web application for validating user input data in a registration form. The application performs basic form validation processes and notifies the user of any errors.
https://github.com/mehmet-github06/react-form-input

animation events html-css-javascript props-and-state-components react react-bootstrap usestate-hook

Last synced: about 4 hours ago
JSON representation

This project contains a simple web application for validating user input data in a registration form. The application performs basic form validation processes and notifies the user of any errors.

• Host: GitHub
• URL: https://github.com/mehmet-github06/react-form-input
• Owner: Mehmet-github06
• Created: 2023-12-07T14:07:53.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-11T14:06:07.000Z (11 months ago)
• Last Synced: 2023-12-11T15:29:55.824Z (11 months ago)
• Topics: animation, events, html-css-javascript, props-and-state-components, react, react-bootstrap, usestate-hook
• Language: JavaScript
• Homepage: https://forn-validasyon-app.netlify.app/
• Size: 1.72 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Form Validation Project



  



This project contains a simple web application for validating user input data in a registration form. The application performs basic form validation processes and notifies the user of any errors.

## Project Link

You can find the live version of the project [here](https://forn-validasyon-app.netlify.app/).

## Conditions

-All fields must be filled.

-Password must be at least 8 characters.

-Email must be valid, containing '@'.

-Image must be a valid URL.

-Username, Firstname, and Lastname must be at least 3 characters long, excluding spaces.

-If the user tries to click the button without passing validation, the button is disabled. If validation fails, the button constantly moves when hovered over. It stops moving when the cursor is moved away.

-When the form is submitted, the entered information is displayed in a card structure below.

-Clicking the "Show" button reveals the entered password. Clicking the "Hidden" button cancels the password visibility.

```

Form Validation (folder)

|

|----readme.md         

SOLUTION

├── public

│     └── index.html

├── src

│    ├── assets

│    ├── components

│    │   ├── card

│    │   │   └── Cards.jsx

│    │   └── forms

│    │       ├── Forms.jsx

│    │       └── form.css

│    ├── App.js

│    ├── index.js

├── package.json

└── yarn.lock

```

## Screenshots



  

  

  



## Compatibility

The project is compatible with both wide-screen computers and mobile devices.