FR (Authenticator): Use consistent style for standard and custom attribute validation

[erikerikson]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Next.js

What browsers are you seeing the problem on?

Chrome, Firefox

Which region are you seeing the problem in?

us-west-2

Please describe your bug.

The validation of custom attributes is different from standard attributes:

Custom attribute (terms not accepted), click "Create Account":

Check the box, then click "Create Account":

both not entering a user name and not accepting the terms were validation errors but they were treated differently. More specifically, the custom error did not get a box around it and the button was a different color (i.e. disabled)

Additionally, the custom attribute is immediately evaluated for validity while the form waits to show errors for the other attributes. (workaround in code snippet) This scolds the user for the default state of the form which doesn't feel fair.

What's the expected behaviour?

The validation results of the two attributes are presented equivalently

Help us reproduce the bug!

1. I followed the instructions here to add terms and conditions
2. npm run dev
3. load the create account screen
4. click the "Create Account" button // see picture 1
5. check the box
6. click the "Create Account" button // see picture 2

Code Snippet

export const options = {
  components: {
    SignUp: {
      FormFields() {
        const { validationErrors } = useAuthenticator()
        return (
          <>
            <Authenticator.SignUp.FormFields />
            <CheckboxField
              errorMessage={validationErrors.terms}
              hasError={!!validationErrors.terms}
              name="terms"
              value="yes"
              label={terms}
            />
          </>
        )
      },
    },
  },
  formFields: {
    signUp: {
      name: { order: 1 },
      email: { order: 2 },
      password: { order: 3 },
      confirm_password: { order: 4 },
    },
  },
  loginMechanisms: ['email'],
  services: {
    async validateCustomSignUp(formData) {
      return Object.keys(formData).length !== 0 && !formData.terms
        ? { terms: 'You must accept the Terms and Conditions to create an account' }
        : undefined
    },
  },
  variation: 'modal',
}

Note that the bit Object.keys(formData).length guards against the error being shown before the user attempts to create their account/submit the form for the first time.

Console log output

n/a

Additional information and screenshots

No response