Tutorial: Building a RedwoodJS Signup Form with Validation

Get Help and Help Others Show & Tell
1

I recently had to add a signup form to one of my Redwood apps. I hadn’t done much custom validation with react-hook-form before, and there isn’t much written about RW’s forms at all (besides the tutorials and docs). So, to hopefully save someone else some time, I did this write up.

The main thing you’ll learn is how to set up validation for a “confirm password” field, and I also show the autoComplete="new-password" attribute that I don’t think everyone knows about.

2 Likes
2

Definitively very interesting tutorial (assessment based on its description). IAM (Identity and Access Management) is one of my favorite topics, that I have yet to pursue in the context of RedwoodJS applications. Thank you @Tobbe :heart:

3

You may consider fixing this typo (unless is intentional :joy:)

image

4

It’s 100% intentional :grinning_face_with_smiling_eyes:

1 Like
5

Lucky that I accounted for that case

6

Awesome, I always love when you put some writing out @Tobbe! Could be potential threetorial material, right? Also quick tip, I’d probably take a code block like this:

<Form onSubmit={onSubmit}>
  <Label name="name">Name:</Label>
  <TextField name="name" />
  <Label name="email">Email:</Label>
  <EmailField name="email" />
  <Label name="password">Password:</Label>
  <PasswordField name="password" />
  <Label name="password_confirm">Confirm Password:</Label>
  <PasswordField name="password_confirm" />
  <Submit>Submit</Submit>
</Form>

and change it to this for readability:

<Form onSubmit={onSubmit}>
  <Label name="name">Name:</Label>
  <TextField name="name" />

  <Label name="email">Email:</Label>
  <EmailField name="email" />

  <Label name="password">Password:</Label>
  <PasswordField name="password" />

  <Label name="password_confirm">Confirm Password:</Label>
  <PasswordField name="password_confirm" />

  <Submit>Submit</Submit>
</Form>

I would possibly break down some of the later ones as well, this stuff really comes down to taste more than anything else but I usually optimize for more space when possible because you want people to really read every line of code.

Another example would be I’d possible change this:

<Label name="name">Name:</Label>
<TextField name="name" validation={{ required: "Name is required" }} />
<FieldError name="name" />

To this

<Label name="name">
  Name:
</Label>

<TextField
  name="name"
  validation={{ required: "Name is required" }}
/>

<FieldError name="name" />

But yeah, super subjective.

7

Thanks for your kind words @ajcwebdev and for your input too. Line breaks/line length I just leave up to prettier.js to worry about. But totally should have grouped the label+input with blank lines between in the first couple of code snippets.

Code updated and pushed. Just waiting for GitHub to build it and publish. Thanks again Anthony.

8

“Every line of code tells a story!”
-Cassidy Williams

1 Like