How reset form values using react bootstrap

Question

My goal after clicking the register button is:

Make input fields blank
Do not show error tooltips

I've already tried using event.target.reset(); however the tooltips are still appearing on the screen.

export default function App() {
  const [showSucessAlert, setshowSucessAlert] = useState(false);
  const [validated, setValidated] = useState(false);
  const [transitionAlert, setTransitionAlert] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    event.preventDefault();

    if (form.checkValidity() === false) {
      event.stopPropagation();
    } else {
      handleClickTransitionAlert();
      setshowSucessAlert(true);
    }
    setValidated(true);
  };

  const handleClickTransitionAlert = () => {
    setTransitionAlert(true);
    setTimeout(() => {
      setTransitionAlert(false);
    }, 1700);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Group className="position-relative" controlId="validationPassword">
        <Form.Label>Password</Form.Label>
        <InputGroup hasValidation id="validationPassword" />
        <Form.Control
          type="password"
          aria-describedby="validationPassword"
          required
        />
        <Form.Control.Feedback tooltip type="invalid">
          Please enter your Password.
        </Form.Control.Feedback>
      </Form.Group>
      <Alert
        className={`mt-1 p-1 position-fixed ${
          transitionAlert ? "alert-shown" : "alert-hidden"
        }`}
        show={showSucessAlert}
        variant="success"
      >
        Registered user!
      </Alert>
      <Button className="mt-5" variant="primary" type="submit">
        Register
      </Button>
    </Form>
  );
}

Here is the CodeSandbox

Every help is welcome!

maxpsz · Accepted Answer · 2022-01-15 18:23:31Z

2

I don't commonly use uncontrolled components, but I think you could solve this by adding setValidated(false) and event.target.reset() to the handleClickTransitionAlert, like this:

  const handleClickTransitionAlert = (event) => {
    setTransitionAlert(true);
    setTimeout(() => {
      setTransitionAlert(false);
      setValidated(false)
      event.target.reset()
    }, 1700);
  };

answered Jan 15, 2022 at 18:23

maxpsz

6045 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guy Nachshon · Accepted Answer · 2022-01-15 18:16:05Z

0

Try reseting the validated attribute on Bootsrap Form. it should look something like this (this is pseudo-code):

import React, { useRef, useState } from 'react';
const FormComponent = () => {
  const [validated, setValidated] = useState(false);
  const formRef = useRef(null);

  const handleReset = () => {
    formRef.current.reset();
    setValidated(false);
  };

  const handleSubmit = () => {
     // Do stuff here
     // On success or error:
    setValidated(true);
    handleReset();
  }

   return(
      <Form ref={formRef}  validated={validated} onSubmit={handleSubmit}>
        // your form inputs
      </Form>
   );
export default FormComponent;
}

answered Jan 15, 2022 at 18:16

Guy Nachshon

2,7017 silver badges18 bronze badges

3 Comments

Dalton Garbin Over a year ago

I tried the way you suggested, but the tooltip is still showing

Guy Nachshon Over a year ago

have you tried conditioning it to the state of the form?

Dalton Garbin Over a year ago

I didn't have the idea to put it in the state, but I managed to solve it with another answer. thanks for the contribution.

Collectives™ on Stack Overflow

How reset form values using react bootstrap

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related