React MaterialUI - Set error on TextField Component after button is clicked

user_6238857 0
Viewed 5219

I have an input form that I want to validate the input fields of once a 'search' button is clicked.

Most answers I have seen are having the input validated live, as the user enters it into the form.
I don't want to do this as some of the validation I need to do is a costly operation (validating an API key for example), therefore constantly checking it as it's entered is not an option.
This is also a serverless, single page application, and as far as I could tell - onSubmit would reload the page, so I'm not using that.

I have a simple form that looks similar to this:

    const [formData, setFormData] = useState({});
    .......
    function handleFormChange(event) {
        let data = formData;
        data[event.target.name] = event.target.value;
        setFormData(data);
    }
    ........
    <form id="search-form" >
       <TextField name="apiKey" label="API Key" onChange={handleFormChange} defaultValue={formData.apiKey} />
       <TextField name='itemName' label="Enter Item" onChange={handleFormChange} />
       <Button name='search-button' onClick={validate} >Search</Button>
    </form>

I can't work out what to put into validate() to either set the errors on the text fields or perform the search. I've tried passing a function into the error prop that checks to see if an errors state variable is populated, I've tried looking into using refs to set the error state but I couldn't see any function that would set the error state.

The formData variable will hold the current data, so it's easy to check 'is this data valid' but for the life of me, I can't work out how to manually trigger the error state.

I'm using React hooks FYI

material-ui reactjs validation javascript
1 Answers

Implement a validation function and call it when you submit your form. Maintain a state for error and update it when form is invalid. Use material UI error prop to display errors beside your fields.

Working demo is here

Code Snippet

export default () => {
  const [formData, setFormData] = useState({
    apiKey: "test"
  });
  const [isFormInvalid, setIsFormInvalid] = useState(false);

  const validate = values => {
    if (values.apiKey !== "") {
      setIsFormInvalid(false);
    } else {
      setIsFormInvalid(true);
    }
  };
  function handleFormChange(event) {
    let data = formData;
    data[event.target.name] = event.target.value;
    setFormData(data);
  }
  const handleSubmit = e => {
    e.preventDefault();
    if (validate(formData)) {
      // proceed to submit
    }
  };
  return (
    <div className="col-sm-12">
      <h1>My Form</h1>
      <form onSubmit={handleSubmit} id="search-form">
        <TextField
          error={isFormInvalid}
          helperText={isFormInvalid && "api key required"}
          name="apiKey"
          label="API Key"
          onChange={handleFormChange}
          defaultValue={formData.apiKey}
        />

        <Button type="submit" name="search-button" onClick={validate}>
          Search
        </Button>
      </form>
    </div>
  );
};
user_132073940
Related