An open API service indexing awesome lists of open source software.

https://github.com/fatihycan/form-validation


https://github.com/fatihycan/form-validation

bootstrap conditional-rendering css3 event-handling html5 javascript react responsive-design state-management

Last synced: 10 months ago
JSON representation

Awesome Lists containing this project

README

          

# Form Validation

This project is a form application that collects various information from the user and verifies this information. Developed using React and Bootstrap. The application offers features such as form verification, user information visualization and password hiding.

## Features

- **Form Validation:**
- **Email:** Must be a valid email address format.
- **Username:** Must be at least 3 characters long.
- **Name and Surname:** Each must be at least 3 characters long.
- **Profile Image URL:** Must be in a valid URL format.
- **Password:** Must be at least 8 characters long.
- **Dynamic Cards:** Displays user information as cards when form data is valid.
- **Show/Hide Password:** Improves user experience with the ability to change the visibility of the password.
- **Button Activation:** The submit button becomes active when the form data is valid.

## Technologies

- HTML5
- CSS3
- React
- javascript
- Bootstrap

# Form Validation

Bu proje, kullanıcıdan çeşitli bilgileri toplayan ve bu bilgileri doğrulayan bir form uygulamasıdır. React ve Bootstrap kullanılarak geliştirilmiştir. Uygulama, form doğrulama, kullanıcı bilgilerini görselleştirme ve şifre gizleme gibi özellikler sunar.

## Özellikler

- **Form Doğrulama:**
- **E-posta:** Geçerli bir e-posta adresi formatında olmalıdır.
- **Kullanıcı Adı:** En az 3 karakter uzunluğunda olmalıdır.
- **Ad ve Soyad:** Her biri en az 3 karakter uzunluğunda olmalıdır.
- **Profil Resmi URL'si:** Geçerli bir URL formatında olmalıdır.
- **Şifre:** En az 8 karakter uzunluğunda olmalıdır.
- **Dinamik Kartlar:** Form verileri geçerli olduğunda, kullanıcı bilgilerini kartlar halinde görüntüler.
- **Şifre Göster/Gizle:** Şifrenin görünürlüğünü değiştirme özelliği ile kullanıcı deneyimini iyileştirir.
- **Buton Aktifleştirme:** Form verileri geçerli olduğunda submit butonu aktif hale gelir.

## Teknolojiler

- HTML5
- CSS3
- React
- Javascript
- Bootstrap

https://github.com/user-attachments/assets/eac3fac6-a25e-4d78-bd7d-2d6b248f8e1b

[Live](https://fy-form-validation.netlify.app/)