4
\$\begingroup\$

I have a form built with react, formik and yup, and this form has some async validations. Apparently, some users were able to bypass these validations, and to prevent some errors, I wanted to disable the submit button when there's a pending http request.

Many years ago, I used to handle this very easily with jQuery, but now, this is not the case.

I came up with a solution where I used the useEffect hook to set a state in case there's an http request running, and the way I'm detecting this is what I wanted your opinion.

Basically:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Input } from '../../../../components/Formik';

const Form = props => {
  const [disableSubmitBtn, setDisableSubmitBtn] = useState(false);

  useEffect(() => {
    axios.interceptors.request.use(
      configs => {
        console.log('http req running');
        setDisableSubmitBtn(true);
        return configs;
      },
      error => {
        return Promise.reject(error);
      },
    );
    console.log('no http req running');
    setDisableSubmitBtn(false);
  }, [disableSubmitBtn]);

  return (
    <form
      className="form-horizontal"
      onSubmit={e => {
        props.handleSubmit(e);
      }}
    >
      {props.settings.bonuscode && (
        <fieldset>
          <Input
            id="marketing.bonus_code"
            {...props.user.marketing.bonus_code}
            {...props}
            classNameLabel="col-md-5"
            classNameInput="col-md-7"
          />
        </fieldset>
      )}

      <button
        id="wordreg-form-submit"
        type="submit"
        disabled={props.settings.formSubmited || disableSubmitBtn}
      >
        Submit
      </button>
    </form>
  );
};

export default Form;

So what matters is actually the code inside the useEffect hook. Whad do you think about it? Is it ok to check for pending http requests this way?

| improve this question | | | | |
\$\endgroup\$
  • \$\begingroup\$ Nothing you can do on frontend to prevent users from bypassing frontend validations. If you want to validate anything in a reliable manner, validate it on backend. \$\endgroup\$ – slepic Dec 3 '19 at 13:26
  • \$\begingroup\$ of course, but that's not the point in here. \$\endgroup\$ – sergioviniciuss Dec 3 '19 at 13:59
  • \$\begingroup\$ I don't really know React Hooks, so take this with a grain of salt. If using useEffect() feels wrong, maybe the right approach is to write your own form. So instead of using the html form, make the React Form component be composed of the parts needed. That way, your button will have an onClick that will send a GET/POST request and at that point you can probably specify what you want to do at the moment you press it and at the moment you receive your response. \$\endgroup\$ – calvines Dec 3 '19 at 16:00
  • \$\begingroup\$ @calvines the useEffect hook is meant for that. I already have my form components... I was just asking for a review as I couldn't find a solution for that after searching for it, and I created this solution on my own, which for me it seems good. as I said, I used to do this in the past with jQuery, and this time I wanted to do it with vanilla, but it felt right to me to use axios interceptors for that. \$\endgroup\$ – sergioviniciuss Dec 4 '19 at 12:21
2
\$\begingroup\$

Yes, your approach looks correct to me. I also had faced similar issues earlier in my project (before hooks were introduced) and had used setState for a boolean variable to enable and disable the button.

The thing which you need to keep in mind is look out for edge cases related to your business requirements. e.g. suppose a async validation is happening but API gave you 401 or some other status code (i.e. validation didn't happen properly but API gave some response), so should you be enabling the button for user to retry or the button should remain disable.

Hoping that I am able to explain you properly. Please revert if something is not clear to you.

| improve this answer | | | | |
\$\endgroup\$
  • \$\begingroup\$ That's a valid point, Sunil! What I did for now is sending a GTM event in case there's an error, so that we can investigate the issue. \$\endgroup\$ – sergioviniciuss Dec 4 '19 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.