Skip to content

strengthened the validation in login and signup pages - #586

Open
anshujod wants to merge 1 commit into
PatelHarsh2006:mainfrom
anshujod:feature/strengthen-validation
Open

strengthened the validation in login and signup pages#586
anshujod wants to merge 1 commit into
PatelHarsh2006:mainfrom
anshujod:feature/strengthen-validation

Conversation

@anshujod

@anshujod anshujod commented Jul 27, 2026

Copy link
Copy Markdown

Title

Strengthen validation and UX feedback for login and signup forms (#580)

Summary

Closes #580.

Login and signup forms previously only validated on submit — a user could fill in every field wrong and get no feedback until they clicked the button, and the "email already registered" check only ran at the very end. This PR adds real-time, field-level validation with clear visual states:

  • Each field now validates on blur (first check) and re-validates on every keystroke once it's been marked invalid, so errors clear the moment the user fixes them instead of waiting for the next submit.
  • Inputs get a red border (.invalid) or green border (.valid) reflecting their current state, in both light and dark theme.
  • Signup's "this email is already registered" check now runs on blur of the email field, not only after clicking Sign Up.
  • Existing field-specific error messages (e.g. "Password must be at least 6 characters.", "Phone number must contain exactly 10 digits.") are unchanged — they now just surface earlier and are backed by the new valid/invalid styling.
  • Submit-time validation still runs as the final gate and now also applies the same valid/invalid classes, so the two paths stay visually consistent.

profile.html was reviewed but not changed — it only displays saved account details and has no editable form, so it wasn't in scope.

Changes

  • js/auth.js: added setFieldValidity and attachLiveValidation helpers; wired live validation into handleLoginPage and handleSignupPage; submit handlers now also set valid/invalid classes alongside existing error messages.
  • css/auth.css: added .input-group input.invalid / .input-group input.valid styles (border + focus ring) for both light and dark mode.

Before:
Screenshot 2026-07-27 at 7 36 15 PM

After:
Screenshot 2026-07-27 at 7 35 40 PM

Test Plan

  • Open login.html: leave email/password empty, tab through fields — inline error + red border appears per field without submitting.
  • Fix each field — border turns green and error clears immediately (no submit needed).
  • Submit with invalid data — same red/green states apply, plus the existing "Please fix the highlighted fields." message.
  • Open signup.html: repeat the same check for name, email, password, phone, location.
  • On signup.html, enter an email that's already registered and blur the field — "This email is already registered. Please log in." appears immediately, before submitting.
  • Toggle dark mode on both pages and confirm the red/green borders remain readable against the dark input background.
  • Confirm existing login/signup happy-path flows (valid data → redirect to index.html) still work unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Strengthen validation and UX feedback for login, signup, and profile forms

1 participant