React Bootstrap Form Validation

Currently I have this React Bootstrap Form that I am able to validate the form fields individually:

<RB.Form horizontal>
  <RB.FormGroup
    controlId="cidInputName"
    validationState={this.getNameValidationState()}
  >
    <RB.ControlLabel>Name/Label</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.name}
      placeholder="Enter text"
      onChange={this.handleNameChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Any name that you wanna use</RB.HelpBlock>
  </RB.FormGroup>

  <RB.FormGroup
    controlId="cidInputMonth"
    validationState={this.getMonthValidationState()}
  >
    <RB.ControlLabel>Month (1-12)</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.month}
      placeholder="Enter month number"
      onChange={this.handleMonthChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Must be a number from 1 to 12 only</RB.HelpBlock>
  </RB.FormGroup>

  <RB.FormGroup
    controlId="cidInputDay"
    validationState={this.getDayValidationState()}
  >
    <RB.ControlLabel>Day (1-31)</RB.ControlLabel>
    <RB.FormControl
      type="text"
      value={this.state.day}
      placeholder="Enter day number"
      onChange={this.handleDayChange}
    />
    <RB.FormControl.Feedback />
    <RB.HelpBlock>Must be a number from 1 to 31 only</RB.HelpBlock>
  </RB.FormGroup>

</RB.Form>

When each form field has a valid input, each FormGroup's validationState should have 'success' as its value.

How do I check for this? How do I check the whole form that all inputs are valid and 'success'-ful?

Is it an anti-pattern to check each function used in validationState?

e.g.

if(this.getNameValidationState() == true && this.getMonthValidationState() == true .....etc...)