-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a6e8d4b
commit 3b69c9f
Showing
1 changed file
with
4 additions
and
18 deletions.
There are no files selected for viewing
22 changes: 4 additions & 18 deletions
22
exercises/01.form-validation/03.solution.no-validate/README.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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! |