Form validation is of vital importance to a website’s security as well as its usability. The validation process evaluates whether the input value is in the correct format before submission. For example, if we have an input field for an email address, the value must certainly contain a valid email address; it should start with at least one letter or number followed by the @
symbol, then end with a domain name.
Form validation can be done using either the built-in form validation, which uses HTML5 form validation features, or with JavaScript.
Using the built-in form validation leverages the use of HTML5 form controls, which provide several ways to handle validation without the use of JavaScript.
HTML5 validation is as easy as adding the required
attribute to any input field, and the browser takes over from there.
One major downside to using the built-in HTML5 validation is that it is is not customizable, and that can be limiting in many ways. This is why we will explore handling HTML5 form validation with a Javascript library called React.
But React only gives us a limited input on how to deal with forms. So the form validation logic is up to us, which brings to our topic for this guide.
In this guide, we will be looking at how to disable HTML5 form validation with formsy-react. This guide assumes some level of familiarity with React and HTML5.
formsy-react is a form input builder and validator for ReactJS. It allows us to:
Build any kind of form element components with free validation.
Add validation rules and use them with simple syntax.
Use handlers for different states on our form (onError
, onSubmit
, onValid
, etc.).
Pass external errors to the form to invalidate elements (e.g., a response from a server).
Including formsy-react in our application is as easy as opening up our terminal and typing the following command:
1 npm install formsy-react
Form validation with formsy-react requires two steps:
1// MyInput.js
2import React from "react";
3import { withFormsy } from "formsy-react";
4
5const MyInput = props => {
6 const handleInputChange = event => {
7 props.setValue(event.currentTarget.value);
8 };
9
10 return (
11 <>
12 <input
13 onChange={handleInputChange}
14 type="text"
15 value={props.value || ""}
16 required={props.required}
17 />
18 <span>{props.errorMessage}</span>
19 </>
20 );
21};
22
23export default withFormsy(MyInput);
withFormsy
is an HOC that exposes additional props to MyInput
component.
You can check out the additional props in the official documentation.
1// App.js
2import React, { useState } from "react";
3import Formsy from "formsy-react";
4
5import MyInput from "./MyInput";
6
7export default function App() {
8 const [canSubmit, setCanSubmit] = useState(false);
9
10 const disableButton = () => {
11 setCanSubmit(false);
12 };
13
14 const enableButton = () => {
15 setCanSubmit(true);
16 };
17
18 const submit = data => {
19 console.log("data", data);
20 };
21
22 return (
23 <Formsy
24 onValidSubmit={submit}
25 onValid={enableButton}
26 onInvalid={disableButton}
27 >
28 <MyInput
29 name="email"
30 validations="isEmail"
31 validationError="This is not a valid email"
32 required
33 />
34 <button type="submit" disabled={!canSubmit}>
35 Submit
36 </button>
37 </Formsy>
38 );
39}
In the code above, we specify all the required field validators with validations
property (see list of available validators).
With validationError
, we set the desired validation message and then use onValid
and onInvalid
handlers to set the state of the button. onValidSubmit
is used to submit the form in a valid state.
More about the props available for the Formsy
wrapper can be found here.
So that's done, but we haven't actually talked about how to disable HTML5 validation in React using formsy-react.
Disabling the built-in HTML5 Validation with formsy-react is as straightforward as adding a noValidate
to the Formsy
component wrapper in order to avoid default behavior on inputs allowing formsy-react to handle and manage all validations.
1// App.js
2import React, { useState } from "react";
3import Formsy from "formsy-react";
4
5import MyInput from "./MyInput";
6
7export default function App() {
8 ...
9
10 return (
11 <Formsy
12 onValidSubmit={submit}
13 onValid={enableButton}
14 onInvalid={disableButton}
15 noValidate
16 >
17 <MyInput
18 name="email"
19 validations="isEmail"
20 validationError="This is not a valid email"
21 required
22 />
23 <button type="submit" disabled={!canSubmit}>Submit</button>
24 </Formsy>
25 );
26}
Form validation is one of the most difficult tasks in web development, but we have seen how to leverage formsy-react to make life easier when dealing with form validation.
Here are some useful links to learn more about form validation: