Skip to content

README.md

Latest commit

 

History

History
59 lines (39 loc) · 2.19 KB

README.md

File metadata and controls

59 lines (39 loc) · 2.19 KB

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.