How do I clear Bootstrap 4 errors after I submit my React form?

Question

I'm using React 16.13.0 with Bootstrap 4. I have the following component created, that I use in my React form ...

const Input = (props) => {
    return (  
  
      {props.title}
      

      {props.errors && props.errors[props.name] && (
          
                 {props.errors[props.name].map((error, index) => (
                     {error}
                 ))} 
          
      )}
  
    )
}

export default Input;

Below is the handle form submit function as well as some of the container where I create my form ...

  async handleFormSubmit(e) {
    e.preventDefault();
    const NC = this.state.newCoop;
    delete NC.address.country;

    try { 
      const response = await fetch(FormContainer.REACT_APP_PROXY + '/coops/',{
        method: "POST",
        body: JSON.stringify(this.state.newCoop),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });

      if (response.ok) {
        const result = await response.json();
        window.flash('Record has been created successfully!', 'success') 
        return result;
      }
      throw await response.json();
    } catch (errors) {
      console.log('_error_: ', errors);
      this.setState({ errors });
    }  
  }

...

  render() {
    if (this.state.coopTypes && !this.state.coopTypes.length) {
      return null;
    }
    return (
      
        
                  

                 {/* Name of the cooperative */}

The issue is, after I submit my form, if there were errors from the previous run, they are still displayed on the screen.

Is there a standard way to clear out Bootstrap error displays after a successful form submission?

user_6475156 · Answer

Since you are using this.state.errors to provide the error information prop to your component, you simply need to update your handleInput(...) function to clear this.state.errors when your input value changes. The idea is something like this:

handleInput = (event) => {
  const errors = Object.assign({}, this.state.errors);
  const target = event.target;

  // remove the error value for a specific input only
  delete errors[target.name];
  this.setState({ errors });

  // Do whatever else needs to be done here for your input
}

Here's a working sample of how this works: https://jsfiddle.net/4gqr0cfa/

user_6094348 · Answer

You need to add or remove form validation based on whether form is valid or not. To do this, add validated prop on the Form which is initially set to false.

How can i make it work?

Follow below mentioned steps:

create a boolean state variable in the component containing the Form and its initial value should be false.
```
const [validated, setValidated] = useState(false);
```
add a prop named validated on the form and set its value equal to the boolean state variable created in step 1.
```
   ...
```
When form is submitted, check if form is valid, if it is, set state variable, validated, to true.

Here's a working demo

function App() {
  const [ validated, setValidated ] = React.useState(false);
  const [ form, setForm ] = React.useState({
    fields: {
      name: { type: 'text', value: '', title: 'Name' },
      email: { type: 'email', value: '', title: 'Email' },
      password: { type: 'password', value: '', title: 'Password' }
    },
    errors: {}
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const errors = {};
    let invalid = false;

    Object.entries(form.fields).forEach(([k, v]) => {
      if (!errors[k]) errors[k] = [];
      
      if (!v.value) {
        errors[k].push(`${k} is required`);
        invalid = true;
      }

      if (k === 'email' && !v.value.includes('@')) {
        errors[k].push('enter a valid email address');
        invalid = true;
      }

      if (k === 'password' && v.value.length < 8) {
        errors[k].push('password should be atleast 8 characters long');
        invalid = true;
      }
    });

    setForm({ ...form, errors });

    if (invalid) {
      setValidated(false);
    } else {
      setValidated(true); 
    }
  };

  const handleChange = ({ target }) => {
    const updatedField = { ...form.fields[target.name], value: target.value };
    
    const fields = { 
      ...form.fields,
      [target.name]: updatedField
    };

    setForm({ ...form, fields });
  };

  return (
    
      
        {
          Object.entries(form.fields).map(([k, v]) => {
            return (
              
            );
          })
        }
        Submit form
      
    
  );
}



const Input = (props) => {
    return (  
      
        {props.title}
         0
                 ? true : false
             : false
          }
          type={props.type}
          id={props.name}
          name={props.name}
          value={props.value}
          placeholder={props.placeholder}
          onChange={props.handleChange}
        />

        {props.errors && props.errors[props.name] && (
            
                  {props.errors[props.name].map((error, index) => (
                      {error}
                  ))} 
            
        )}
      
    )
}


ReactDOM.render(, document.getElementById('root'));

You can also view the same demo on stackblitz

You can improve the above demo by indicating to the user that the input field is valid or invalid by adding green or red border repectively by using is-valid and is-invalid classes.

function App() {
  const [ validated, setValidated ] = React.useState(false);
  const [ form, setForm ] = React.useState({
    fields: {
      name: { type: 'text', value: '', title: 'Name' },
      email: { type: 'email', value: '', title: 'Email' },
      password: { type: 'password', value: '', title: 'Password' }
    },
    errors: {}
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const errors = {};
    let invalid = false;

    Object.entries(form.fields).forEach(([k, v]) => {
      if (!errors[k]) errors[k] = [];
      
      if (!v.value) {
        errors[k].push(`${k} is required`);
        invalid = true;
      }

      if (k === 'email' && !v.value.includes('@')) {
        errors[k].push('enter a valid email address');
        invalid = true;
      }

      if (k === 'password' && v.value.length < 8) {
        errors[k].push('password should be atleast 8 characters long');
        invalid = true;
      }
    });

    setForm({ ...form, errors });

    if (invalid) {
      setValidated(false);
    } else {
      setValidated(true); 
    }
  };

  const handleChange = ({ target }) => {
    const updatedField = { ...form.fields[target.name], value: target.value };
    
    const fields = { 
      ...form.fields,
      [target.name]: updatedField
    };

    setForm({ ...form, fields });
  };

  return (
    
      
        {
          Object.entries(form.fields).map(([k, v]) => {
            return (
              
            );
          })
        }
        Submit form
      
    
  );
}



const Input = (props) => {
    return (  
      
        {props.title}
         0
                 ? true : false
             : false
          }
          type={props.type}
          id={props.name}
          name={props.name}
          value={props.value}
          placeholder={props.placeholder}
          onChange={props.handleChange}
          className={
             Array.isArray(props.errors[props.name])
             ? props.errors[props.name].length > 0 ? 'is-invalid': 'is-valid'
             : ''
          }
        />

        {props.errors && props.errors[props.name] && (
            
                  {props.errors[props.name].map((error, index) => (
                      {error}
                  ))} 
            
        )}
      
    )
}


ReactDOM.render(, document.getElementById('root'));

View this demo on stackblitz

You can read about the form validation in bootstrap at the official docs of react-bootstrap and bootstrap

How do I clear Bootstrap 4 errors after I submit my React form?

2 Answers

How can i make it work?