Sign up form validation not working with "required" formField

[borisdayma]

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.

[amhinson]

@borisdayma Could you also share what version of the Amplify packages you are using?

[borisdayma]

I use:
@aws-amplify/ui v2.0.2
aws-amplify v3.3.1

[sammartinez]

@borisdayma Thanks for reporting this, in checking the code, I am seeing this as a miss on our side and we need to further step up validation for fields besides phone number, email, and password as you have called out. I do want to call out that we are busy with other priorities within the library and may not get to this for a little bit of time. However, if you are up for it, we would accept a contribution from you if this is something you are want to work on if you have time yourself. Thanks ahead of time!

[ericclemmons]

Here are the two places that could have required added:

amplify-js/packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx

Lines 53 to 63 in dbd4629

	<amplify-input
	fieldId={this.fieldId}
	description={this.description}
	type={this.type}
	handleInputChange={this.handleInputChange}
	placeholder={this.placeholder}
	name={this.name}
	value={this.value}
	inputProps={this.inputProps}
	disabled={this.disabled}
	/>

amplify-js/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx

Lines 46 to 57 in dbd4629

	<input
	id={this.fieldId}
	aria-describedby={this.fieldId && this.description ? `${this.fieldId}-description` : null}
	type={this.type}
	onInput={event => this.handleInputChange(event)}
	placeholder={this.placeholder}
	name={this.name}
	class="input"
	value={this.value}
	disabled={this.disabled}
	{...this.inputProps}
	/>

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

[krikork]

I recently migrated to @aws-amplify/ui-react from aws-amplify-react so I can leverage the support for SSR with nextjs and am struggling with the same issue.

[mattschutt]

This is also happening on the React reset password screen. I had to do a lot of customization and copying code out of the library to be able to simply send down the 'name' field. I would love to just tell it to render the require fields and handle it.

Looks like this happened in the Angular library as well: #5636

[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.

[jstilesm]

Still running into this issue where adding required: true below does not throw an error when the field is not filled out.

Currently in my App, only username and password are required for the form.

Relevant Code

const renderSignIn = (
      <>
        {alertMessage && (<div className="customToast">{alertMessage}</div>)}
        <AmplifyAuthenticator
          usernameAlias="username"
          headerText="Sign in or create an account"
          hideToast
        >
          <AmplifySignUp
            headerText="Create account"

            slot="sign-up"
            formFields={[
              { type: 'username', required: true },
              { type: 'password'},
              { type: 'phone_number', required: true},
              { type: 'email', required: true }

            ]}
          />
          <AmplifySignIn slot="sign-in" usernameAlias="username" />
          <AmplifyConfirmSignUp
            headerText="Please check your text messages for your confirmation code"
          />
        </AmplifyAuthenticator>
      </>
    );

Current Version

• @aws-amplify/ui-react 1.0.0
• aws-amplify 4.0.0

[jo2]

@ericclemmons Is there anything new on this issue?

Here are the two places that could have required added:

amplify-js/packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx

Lines 53 to 63 in dbd4629

	<amplify-input
	fieldId={this.fieldId}
	description={this.description}
	type={this.type}
	handleInputChange={this.handleInputChange}
	placeholder={this.placeholder}
	name={this.name}
	value={this.value}
	inputProps={this.inputProps}
	disabled={this.disabled}
	/>

amplify-js/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx

Lines 46 to 57 in dbd4629

	<input
	id={this.fieldId}
	aria-describedby={this.fieldId && this.description ? `${this.fieldId}-description` : null}
	type={this.type}
	onInput={event => this.handleInputChange(event)}
	placeholder={this.placeholder}
	name={this.name}
	class="input"
	value={this.value}
	disabled={this.disabled}
	{...this.inputProps}
	/>

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

As far as I've seen, the required field is not used in

amplify-js/packages/amplify-ui-components/src/components/amplify-select/amplify-select.tsx

Lines 71 to 78 in 56deb45

	<select
	name={this.fieldId}
	id={this.fieldId}
	class="select"
	onChange={this.handleInputChange}
	>
	{this.selectOptions}
	</select>

and

amplify-js/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx

Lines 117 to 136 in 56deb45

	<input
	id={this.fieldId}
	aria-describedby={
	this.fieldId && this.description
	? `${this.fieldId}-description`
	: null
	}
	data-autocompleted={this.autoCompleted}
	type={this.type}
	onInput={event => {
	this.autoCompleted = false;
	this.handleInputChange(event);
	}}
	placeholder={this.placeholder}
	name={this.name}
	class="input"
	value={this.value}
	disabled={this.disabled}
	{...this.inputProps}
	/>

I kind of need this feature, so I could submit a PR if you want.

[jacoblogan]

This issue has been reproduced and is being worked on

[eddiekeller]

Merged in PR ^^ to fix the required prop not doing anything on those inputs. I will close this ticket now, but please open it back up or submit a new ticket to us if any issues remain for you!

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.