Validate Email Format Before Submitting Login
Client-side email format validation prevents unnecessary network requests and gives users faster, more actionable feedback. The credential validator should check that the email field contains a recognisable email pattern (local part + @ + domain) on form submission (not on every keystroke, to avoid disrupting the user mid-entry). If the email format is invalid, a specific field-level error is shown inline. The password field should validate that it is not empty before submission. These checks must run before any authentication network call is initiated.
User Story
Acceptance Criteria
- Given the email field contains 'notanemail', When the user taps the sign-in button, Then inline validation displays 'Please enter a valid email address' adjacent to the email field and no network request is made
- Given the email field is completely empty, When the user taps sign in, Then the error 'Email address is required' is shown for the email field
- Given the password field is empty, When the user taps sign in, Then the error 'Password is required' is shown for the password field
- Given all client-side validation passes, When the user taps sign in, Then the network authentication request is initiated and a loading indicator is shown on the button
- Given an inline validation error is shown, When the user corrects the field and taps sign in again, Then the field error clears and the request proceeds if all fields are now valid
Business Value
Client-side validation reduces failed server requests, lowers API costs, and provides a measurably faster error-correction cycle for the user. For peer mentors in areas with poor connectivity — common in rural Norway where peer support work often takes place — avoiding unnecessary network round-trips for avoidable input errors improves perceived performance and reduces data usage.
Components
- Login Form ui
- Login Form BLoC service
- Credential Validator service
Dependencies
- Sign In with Email and Password critical