No indication or error message when input does not match requirements

[shravankshenoy]

Describe the bug
When user enter a password which does not match the requirements (at least 8 characters, one uppercase, one lowercase, one number and one special character), then no error message is shown. This may cause user to get confused as to why sign up is not happening even though he/she has entered all the details correctly

To Reproduce
Open https://www.circuitparts.in/auth/signup or localhost:3000/auth/signup if running locally. Enter the following details

First Name : John
Last Name : Doe
Email : [email protected]
Password : 1234abcd

On clicking on Create Account, nothing happens, neither is any error message shown.

Expected behavior
An error message is shown as shown in image below, if password (or any other input) does not meet requirements

Version
NA

Possible Solution
We could use the ErrorMessage component which Formik provides, as shown in the code snippet below

<div className="grid gap-2">
  <label htmlFor="password">Password</label>
  <div className="relative">
    <Field 
     data-testid="password-input" 
     as={Input} 
     id="password" name="password"
     type={isPasswordVisible ? "text" : "password"} 
     placeholder="enter your password" 
     autoComplete="off" 
     formNoValidate
     required />
    
    <ShowPasswordButton
      isPasswordVisible="{isPasswordVisible}"
      setIsPasswordVisible="{setIsShowPassword}"
    />
    
    <ErrorMessage name="password" />
  </div>
</div>

Moreover to display form error only on submit we could disable validateonChange and validateonBlur as shown below

<Formik
  validateOnChange={false}
  validateOnBlur={false}
  ...
/ >