https://github.com/angryhtml/registration-form

☑Registration Form with Validation using Static Methods
https://github.com/angryhtml/registration-form

classes-in-javascript css html javascript static-methods validation-form

Last synced: about 1 month ago
JSON representation

☑Registration Form with Validation using Static Methods

• Host: GitHub
• URL: https://github.com/angryhtml/registration-form
• Owner: angryhtml
• Created: 2025-03-04T19:41:19.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-21T20:19:11.000Z (about 1 year ago)
• Last Synced: 2025-06-13T18:09:34.197Z (11 months ago)
• Topics: classes-in-javascript, css, html, javascript, static-methods, validation-form
• Language: JavaScript
• Homepage: https://registrationform-staticmethods.netlify.app/
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Registration Form with Validation (TypeScript Version)

This project is an interactive registration form with data validation, rewritten from JavaScript to TypeScript. It demonstrates the use of **static methods** in a `UserUtils` class to validate user input, leveraging TypeScript's type safety and modern features.

---

## Key Features

- **Email Validation:** Checks the correctness of the email format using a static method.

- **Password Validation:** Password must contain at least 8 characters, including a digit, an uppercase letter, and a special character (`@`, `!`, `&`, `?`).

- **Password Confirmation:** Ensures the password and confirmation match.

- **Success Message:** Shows a confirmation after successful registration.

- **Form Reset:** Automatically resets the form 5 seconds after successful submission.

- **Responsive Design:** The form and messages display correctly on all device sizes.

- **TypeScript:** Code rewritten to TypeScript for better maintainability and error checking.

---

## Technologies Used

- **HTML:** Structure of the form and messages.

- **CSS:** Styling and responsive design.

- **TypeScript:** Validation logic, static methods, and form reset.

- **tsconfig.json:** Configured to target ES2015 and browser APIs.

---

## How It Works

The validation logic is encapsulated in the `UserUtils` class with static methods:

- `UserUtils.validateEmail(email: string): boolean` — checks if email contains `'@'` and a dot after it.

- `UserUtils.validatePassword(password: string): boolean` — verifies password length and complexity.

When the form is submitted:

1. Validation methods check the inputs.

2. Errors display inline if validation fails.

3. On success, the form hides, a success message shows.

4. After 5 seconds, the form resets and is displayed again.

---

## Usage

1. Open `index.html` in a browser.

2. Fill out the registration form.

3. Submit and see validation in action.

4. After success, the form resets automatically.

---

## Development

To build or modify the project:

- Make changes in `src/script.ts`.

- Compile with `npx tsc` (configured by `tsconfig.json`).

- Open or refresh `index.html` to see updates.