Skip to content

Commit

Permalink
fix(routes): mark login and sign up fields required
Browse files Browse the repository at this point in the history
This does nothing to the form validation functionality (we still will
use `@conform-to` client and server-side) but it ensures that the
`aria-required` attributes are set correctly. When not using JS
client-side, this results in a slightly better experience as the user's
browser will do some client-side validation for us before our server
performs validation.
  • Loading branch information
nicholaschiang committed Jul 23, 2023
1 parent 1fd7d8d commit 557649f
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 6 deletions.
8 changes: 4 additions & 4 deletions app/routes/_layout.join.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export default function Join() {
{name.error && <FormMessage>{name.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input placeholder='Anna Wintour' />
<Input placeholder='Anna Wintour' required />
</FormControl>
</FormField>
<FormField name={username.name}>
Expand All @@ -157,7 +157,7 @@ export default function Join() {
{username.error && <FormMessage>{username.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input placeholder='anna.wintour' />
<Input placeholder='anna.wintour' required />
</FormControl>
</FormField>
<FormField name={email.name}>
Expand All @@ -166,7 +166,7 @@ export default function Join() {
{email.error && <FormMessage>{email.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input type='email' placeholder='anna@vogue.com' />
<Input type='email' placeholder='anna@vogue.com' required />
</FormControl>
</FormField>
<FormField name={password.name}>
Expand All @@ -175,7 +175,7 @@ export default function Join() {
{password.error && <FormMessage>{password.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input type='password' placeholder='••••••••' />
<Input type='password' placeholder='••••••••' required />
</FormControl>
</FormField>
<FormSubmit asChild>
Expand Down
4 changes: 2 additions & 2 deletions app/routes/_layout.login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default function LoginPage() {
{email.error && <FormMessage>{email.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input type='email' placeholder='anna@vogue.com' />
<Input type='email' placeholder='anna@vogue.com' required />
</FormControl>
</FormField>
<FormField name={password.name}>
Expand All @@ -120,7 +120,7 @@ export default function LoginPage() {
{password.error && <FormMessage>{password.error}</FormMessage>}
</FormLabelWrapper>
<FormControl asChild>
<Input type='password' placeholder='••••••••' />
<Input type='password' placeholder='••••••••' required />
</FormControl>
</FormField>
<FormSubmit asChild>
Expand Down

0 comments on commit 557649f

Please sign in to comment.