[Bug]: Missing Input Validation on Signup Form

[Harsh-vardhan09]

Area

Frontend UI

What happened?

Bug: Missing Email & Form Input Validation on Signup Form

Description

The signup form currently allows invalid input values to be submitted without proper validation.

Example issues observed:

• Invalid email formats are accepted
• Username accepts invalid characters/formats
• Weak passwords are not properly validated
• Date of birth fields may allow invalid or incomplete values
• Submit button behavior is inconsistent when fields are invalid

This can lead to:

• Invalid account creation attempts
• Poor UX
• Backend validation failures
• Potential security/data quality issues

---

Screenshot

---

Current Problems

Email Field

The form accepts malformed emails such as:

• harsh@gmail
• test@
• abc
• user@@gmail.com

Expected:

• Only valid email formats should be accepted

---

Username Field

Potential issues:

• Allows email-like usernames unintentionally
• No validation for:
  • minimum length
  • special characters
  • spaces
  • reserved words

Expected:

• Restrict invalid characters
• Define clear username rules

Example valid usernames:

• harsh
• harsh_96
• harsh-dev

---

Password Field

Current validation appears too weak.

Expected validations:

• Minimum 8 characters
• At least:
  • 1 uppercase letter
  • 1 lowercase letter
  • 1 number
  • 1 special character

Example invalid passwords:

• 1234567
• password
• abcdef

---

Date of Birth Validation

DOB inputs should validate:

• Valid day/month/year combinations
• Age restrictions (if required)
• Empty/incomplete values

Examples:

• Prevent future dates
• Prevent invalid dates like 31 February

---

Expected Behavior

• Form should validate all fields before submission
• Inline validation errors should appear below inputs
• Submit button should remain disabled until form is valid
• Invalid inputs should show clear error messages
• Validation should happen:
  • on blur
  • on submit
  • optionally during typing

---

Suggested Validation Rules

Email Regex

/^[^\s@]+@[^\s@]+\.[^\s@]+$/




### Steps to reproduce

1. signup page
2. false email like harsh.gamil.com
3. ask for otp

### Expected behavior

user should only be able to input right email using regex and form validation on frontend

### Actual behavior

can input false or wrong input by mistake

### App surface

Registration / OTP verification

### Local environment

_No response_

### Console, network, or server logs

```shell

Screenshots or recordings

No response

Before submitting

• I checked for an existing issue that already describes this bug.
• I included enough detail for someone else to reproduce the issue.

[chthonn]

@Harsh-vardhan09 Go ahead

[Harsh-vardhan09]

@0rigin-c0de
Thankyou can you add the gssoc labels since im a gssoc contributer if you dont mind

[HARISH-BN890]

Hi, I would like to work on this issue. Please assign it to me

[bhumikasudarshani-cmd]

@0rigin-c0de I have identified this issue and would love to fix under GSSoC. Could you please assign this to me

[ShreyaSinghal22]

Hi @chthonn, I would love to work on this issue as part of GSSoC! Could you please assign it to me?

Here is my proposed solution approach for the frontend input validation:

Proposed Solution Approach

1. Email Validation: * Implement a robust regex pattern matching standard email formats (e.g., /^[^\s@]+@[^\s@]+\.[^\s@]+$/) to reject malformed inputs like harsh@gmail or user@@gmail.com.

2. Username Validation:

   • Restrict spaces and invalid special characters.
   • Enforce a minimum length requirement and ensure alphanumeric characters, hyphens, or underscores are properly validated.

3. Password Strength Validation:

   • Implement an updated validation rule requiring a minimum of 8 characters.
   • Ensure it contains at least one uppercase letter, one lowercase letter, one number, and one special character.

4. Date of Birth Validation:

   • Add checks to prevent selecting or entering future dates.
   • Validate day/month/year combinations to prevent impossible dates (e.g., February 31st).

5. UX Improvements:

   • Implement real-time inline validation error messages right below the respective fields on blur and onChange.
   • Keep the form's submit button disabled until all fields meet the validation rules successfully.

Looking forward to your guidance so I can get started!