title: Form validation of Sign Up Fields with amplify-ui 2.0 in addition to CheckboxField in the React
body: <p>I am using amplify-ui 2.0 for my React application.
  The docs (<a href="https://ui.docs.amplify.aws/components/authenticator#sign-up-fields" rel="nofollow noreferrer">document link</a>) show an example of Sign Up Fields validation for CheckboxField using validateCustomSignUp, but how can I validate the other custom field? For example, I added name field, and added custom code for validateCustomSignUp, but it does not work.</p>
  <p>The code is</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function App() {
    return (
      &lt;Authenticator
        // Default to Sign Up screen
        initialState="signUp"
        // Customize `Authenticator.SignUp.FormFields`
        components={{
          SignUp: {
            FormFields() {
              const { validationErrors } = useAuthenticator();
  
              return (
                &lt;&gt;
                  {/* Re-use default `Authenticator.SignUp.FormFields` */}
                  &lt;Authenticator.SignUp.FormFields /&gt;
                  
                  &lt;TextField
                          isRequired
                          key="name"
                          name="name"
                          label="name"
                          placeholder="name"
                   /&gt;
  
                  {/* Append &amp; require Terms &amp; Conditions field to sign up  */}
                  &lt;CheckboxField
                    errorMessage={validationErrors.acknowledgement}
                    hasError={!!validationErrors.acknowledgement}
                    name="acknowledgement"
                    value="yes"
                    label="I agree with the Terms &amp; Conditions"
                  /&gt;
                &lt;/&gt;
              );
            },
          },
        }}
        services={{
          async validateCustomSignUp(formData) {
            if (!formData.acknowledgement) {
              return {
                acknowledgement: 'You must agree to the Terms &amp; Conditions',
              };
            }
             if (formData.name &lt; 5) {
              return {
                name: 'Your name must be more than 5 characters ',
              };
            }
          },
        }}
      &gt;
        {({ signOut, user }) =&gt; (
          &lt;main&gt;
            &lt;h1&gt;Hello {user.username}&lt;/h1&gt;
            &lt;button onClick={signOut}&gt;Sign out&lt;/button&gt;
          &lt;/main&gt;
        )}
      &lt;/Authenticator&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>