Skip to content

[FEATURE] Add custom JavaScript validation for the **signup form** #57

@MehakGo

Description

@MehakGo

Describe the feature

Add custom JavaScript validation for the signup form (Create an Account page). Currently, the form shows the browser’s default validation tooltip (e.g., “Please fill out this field”), which looks inconsistent with the app design and provides a poor user experience.

Image

Use case

Users signing up should see clear, styled inline error messages (e.g., “Email is required”, “Password must be at least 6 characters”) instead of browser defaults. This ensures consistency with the app’s dark theme, improves accessibility, and makes the form more user-friendly.

Proposed implementation

  • Disable default validation with novalidate on the <form>.
  • Add custom JS validation for:
    • Full Name: required, min length.
    • Email: valid email format.
    • Password: required, min length.
  • Show inline error messages below each field with red text + border highlight.
  • Add accessibility attributes (aria-invalid, aria-describedby) for screen readers.
    @devayanm I am an OSCI contributor , and want to work on this issue , please assign it to me.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions