Disabling HTML5 Validation in React Using formsy-react

Disabling the built-in HTML5 Validation is straightforward to avoid default behavior on inputs allowing formsy-react to handle and manage all validations.

Feb 14, 2020 • 6 Minute Read

Subscribe to the newsletter

Introduction

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.

What is formsy-react?

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).
Dynamically add form elements to our form and they will register/unregister the form.

HTML5 Validation with formsy-react

Including formsy-react in our application is as easy as opening up our terminal and typing the following command:

      npm install formsy-react

Form validation with formsy-react requires two steps:

Build a Formsy Element

      // MyInput.js
import React from "react";
import { withFormsy } from "formsy-react";

const MyInput = props => {
  const handleInputChange = event => {
    props.setValue(event.currentTarget.value);
  };

  return (
    <>
      <input
        onChange={handleInputChange}
        type="text"
        value={props.value || ""}
        required={props.required}
      />
      <span>{props.errorMessage}</span>
    </>
  );
};

export 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.

Use the Formsy Element in our App

      // App.js
import React, { useState } from "react";
import Formsy from "formsy-react";

import MyInput from "./MyInput";

export default function App() {
  const [canSubmit, setCanSubmit] = useState(false);

  const disableButton = () => {
    setCanSubmit(false);
  };

  const enableButton = () => {
    setCanSubmit(true);
  };

  const submit = data => {
    console.log("data", data);
  };

  return (
    <Formsy
      onValidSubmit={submit}
      onValid={enableButton}
      onInvalid={disableButton}
    >
      <MyInput
        name="email"
        validations="isEmail"
        validationError="This is not a valid email"
        required
      />
      <button type="submit" disabled={!canSubmit}>
        Submit
      </button>
    </Formsy>
  );
}
    

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 HTML5 Validation with 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.

      // App.js
import React, { useState } from "react";
import Formsy from "formsy-react";

import MyInput from "./MyInput";

export default function App() {
  ...

  return (
    <Formsy
      onValidSubmit={submit}
      onValid={enableButton}
      onInvalid={disableButton}
      noValidate
    >
      <MyInput
        name="email"
        validations="isEmail"
        validationError="This is not a valid email"
        required
      />
      <button type="submit" disabled={!canSubmit}>Submit</button>
    </Formsy>
  );
}
    

Conclusion

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: