Skip to content
This repository was archived by the owner on Aug 23, 2022. It is now read-only.

Commit 687d0f4

Browse files
committed
Adding docs for noValidate vs onInvalid. Addresses #823
1 parent e325e37 commit 687d0f4

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

docs/guides/faqs.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,20 @@ Simply pass the `type="email"` or `type="password"`, etc. type as a prop to `<Co
170170

171171
You will also get the native HTML5 constraint validation with these, as if you were using `<input type="email">`.
172172

173+
### How do I hide native HTML5 validation messages, and still prevent the form from submitting if invalid?
174+
175+
You might think that `noValidate` will solve this issue, but according to the [W3 spec for `noValidate`](https://dev.w3.org/html5/spec-preview/form-submission.html#attr-fs-novalidate), it does _not_ prevent a form from being submitted if the form is invalid due to HTML5 constraint validity. RRF follows the spec closely with regard to this behavior.
176+
177+
Instead, use the native `onInvalid` handler to prevent the native HTML5 validation message from displaying:
178+
179+
```jsx
180+
<Control.text
181+
model="user.email"
182+
type="email"
183+
onInvalid={e => e.preventDefault()}
184+
/>
185+
```
186+
173187
### Other Questions and Answers
174188
- https://github.com/davidkpiano/react-redux-form/issues/675#issuecomment-281164930
175189
{% endraw %}

0 commit comments

Comments
 (0)