Sign up form validation not working with "required" formField

Describe the bug

In the sign up form, “required” fields are only considered for email, username and password. The form does not catch any incomplete fields that have been set to “required”.

To Reproduce Steps to reproduce the behavior:

In Vue, create a sign up form from <amplify-sign-up> component and add some required formFields. Then you can still sign-up without filling in those required fields.

Expected behavior We should get a notification mentioning that those fields are required

Code Snippet

<template>
  <amplify-authenticator username-alias="email">
    <amplify-sign-up
      slot="sign-up"
      username-alias="email"
      :form-fields.prop="formFields"
    />
  </amplify-authenticator>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        {
          type: 'email',
          required: true,
        },
        {
          type: 'given_name',
          label: 'First Name *',
          placeholder: 'Enter your first name',
          required: true,
        },
        {
          type: 'password',
          required: true,
        },
        {
          type: 'phone_number',
          required: true,
        },
      ],
    }
  },
}
</script>

Screenshots

We can create an account without filling in “First name” and “Phone Number”, which are required fields.

Once, I got a message saying that given_name was required but it never happened again…

Additional information

I see there is a validationData parameter which appears to be empty. I assume it should be completed based on these required parameters. It would be nice to also explain how to use it for more complex scenarios.

[ironspur5]

Any updated on enforcing the required flag? I have custom attributes defined in form fields on sign up, and have set them to be required. Yet, I am able to sign up without them, still.

[ericclemmons]

Here are the two places that could have required added:

https://github.com/aws-amplify/amplify-js/blob/dbd46299af9c558251b8c652c3e50208982655c8/packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx#L53-L63

https://github.com/aws-amplify/amplify-js/blob/dbd46299af9c558251b8c652c3e50208982655c8/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx#L46-L57

If it’s passed along there, these inputs should automatically get HTML5 required validation!