Skip to content

Commit

Permalink
fix instruction on 03 solution
Browse files Browse the repository at this point in the history
  • Loading branch information
kentcdodds committed Jul 25, 2023
1 parent a6e8d4b commit 3b69c9f
Showing 1 changed file with 4 additions and 18 deletions.
22 changes: 4 additions & 18 deletions exercises/01.form-validation/03.solution.no-validate/README.mdx
Original file line number Diff line number Diff line change
@@ -1,21 +1,7 @@
# Disable Default Validation

👨‍💼 Now that we have nice looking error messages we manage ourselves, we want to
disable the built-in browser errors because they go counter to our design
aesthetic.
👨‍💼 Super! Now we can rest assured that the built-in client validation will still
apply until our JavaScript shows up to make things even better!

But we don't want to disable them completely, just once our JavaScript has
loaded to enhance the user experience. Until that time, the browser's built-in
client-side validation is ok. So, we'll use a little trick to disable them only
after our React app has hydrated:

```tsx
function useHydrated() {
const [hydrated, setHydrated] = useState(false)
useEffect(() => setHydrated(true), [])
return hydrated
}
```

We effectively only need to assign the return value of that hook to the
`noValidate` prop of our form and we're good to go.
But... our JavaScript isn't making things much better on the client just yet...
So let's handle that next!

0 comments on commit 3b69c9f

Please sign in to comment.