Using availity-reactstrap-validation, I run an onClick event when hitting submit, and this is cancelling out the actual validation

Question

Just to preface this, I'm learning from scratch so please be gentle. I've tried for a few days to work this out and this is my last resort (I like to try and work it out myself where possible).

I have the following code in a Reactstrap modal (just the relevant part):

Modal.js

                  const { toggle, onSave } = this.props;
                      return ( 
                         <ModalBody>
                          <AvForm> 
                           <AvGroup>
                            <Label for="description">Description</Label>
                            <AvInput
                                type="text"
                                name="description"
                                value={this.state.activeItem.description}
                                onChange={this.handleChange}
                                placeholder="Tool description"
                                required
                            />
                            <AvFeedback valid>
                                Looking good
                            </AvFeedback>
                            <AvFeedback>
                                Uh oh! Looks like a blank string
                            </AvFeedback>

and a button:

                            <Button onClick={() => onSave(this.state.activeItem)}>
                              Save
                            </Button>
                      </AvForm>
                     </ModalBody>

App.js (again, the relevant parts, I think)

             toggle = () => {
               this.setState({ modal: !this.state.modal });
             };

             handleSubmit = item => {
             this.toggle();
             if (item.id) {
               axios
                 .put(`http://localhost:8000/api/todos/${item.id}/`, item)
                 .then(res => this.refreshList());
               return;
           }
           axios
             .post("http://localhost:8000/api/todos/", item)
             .then(res => this.refreshList());
           };

render() {
  return( 

       ...

     {this.state.modal ? (
          <Modal
            activeItem={this.state.activeItem}
            toggle={this.toggle}
            onSave={this.handleSubmit}
          />
        ) : null}

    ...

If I remove the onClick event, the form validation works as you'd expect. I'm just not sure how to tell it to first perform the validation, and if it passes then go ahead and submit, otherwise display the validation warnings and leave the form open...

Thanks a lot for the help!

Answer 1

Try to use onValidSubmit of AvForm. According to documentation, this callback is called only when every field is valid when submitted:

handleSubmit(){
  onSave(this.state.activeItem)
}

<AvForm onValidSubmit={this.handleSubmit}>
...
</AvForm>