react-bootstrap validation state

Question

While trying to build the web app i am facing difficulty in implementing form validation having multiple form control. I am trying to make a onSave() method which will get activated when save button is pressed. This method will check that any field if empty return 'error' turn red and if every field is filled then return 'success' turn green and page will proceed further.

import React, { Component } from 'react';
import { Modal, Popover, Tooltip, Button , FormControl, FormGroup, ControlLabel } from 'react-bootstrap';

    class Animal extends React.Component {
      constructor(props, context) {
        super(props, context);
        this.state = {
          herbivores: '',
          omnivores: '',

        };
      }


      herbiValidation() {
         const length = this.state.item.length;
         if (length==0) return null;
         else if (length>0) return 'success';
      }
      omniValidation() {
         const length1 = this.state.additionalInfo.length;
         if (length1==0) return null;
         else if (length1>0) return 'success';
      }

onSave()
{

}

      render() {
        const popover = (
          <Popover id="modal-popover" title="popover">
            very popover. such engagement
          </Popover>
        );
        const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

        return (
          <div>

            <Modal show={this.props.show} onHide={()=>this.props.handleClose()}>
              <Modal.Header closeButton>
                <Modal.Title>Types of animal</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <form>
                <FormGroup controlId='herbiName' validationState={this.herbiValidation()}>
                  <ControlLabel>herbi Name</ControlLabel>
                  <FormControl
                    type='text'
                    value={this.state.herbivores}
                    placeholder='Enter herbivores Name'
                    onChange={({ target }) => { this.setState({ herbivores: target.value }) }}
                  />
                <FormControl.Feedback />
                </FormGroup>


                <FormGroup controlId='omniName' validationState={this.omniValidation()}>
                  <ControlLabel>OmniName</ControlLabel>
                  <FormControl
                    type='text'
                    value={this.state.omnivores}
                    placeholder='Enter omnivores Name'
                    onChange={({ target }) => { this.setState({ omnivores: target.value }) }}
                  />
                <FormControl.Feedback />
                </FormGroup>

                <Button bsStyle='primary' className='save-button' onClick={() => this.props.submit(this.state)}>Save</Button>
                </form>

                </Modal.Body>
                <Modal.Footer>
                  <Button onClick={()=>this.props.handleClose()}>Close</Button>
                </Modal.Footer>
            </Modal>
          </div>

                  );
              }



          }



    export default Animal;

Answer 1

You can use if operation to check if values exist

onSave(){
    if(this.state.herbivores && this.state.omnivores){
        //Do something if both values exists
        return "Success"
    }
    else{
        //Do something if both values do not exist
        return "Error"
    }

}