Reactjs and ant Checkboxes and validation

I am new to reactjs - and we are using the ant checkbox.. but I need to try and add some kind of validation to ensure its working.. I've added the basic checkbox into the code and trying to assess if its going to replace the older checkbox there -- may need to add a custom name, id

What's the best way to add a validation to this part of the form so it only continues if a user has made at least 1 option?

http://ift.tt/2rMkCPc

import React from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

// action creators
import { specifyBundle, submitBundle } from '../../actions/action_bundle'

import { Checkbox } from 'antd'

class CustomiseProject extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.handleInputChange = this.handleInputChange.bind(this)
    this.submitHandler = this.submitHandler.bind(this)
  }

  handleInputChange (event) {
    const target = event.target
    const value = target.type === 'checkbox' ? target.checked : target.value
    const name = target.name
    this.setState({
      [name]: value
    })
  }

  submitHandler () {
    // create an object an push the customisation and project data on to it
    let bundleCustomisationData
    bundleCustomisationData = {
      customisation: this.state,
      service: this.props.service,
      bundle: this.props.bundle
    }
    // submit the local state to the redux store
    this.props.submitBundle(bundleCustomisationData)
    this.props.specifyBundle('submitCredentials')
  }

  render () {

    const lang = this.props.lang
    const service = this.props.service
    const bundle = this.props.bundle

    return (
      <div>
        <div className='row grid__row--offset--30'>
          <div className='small-60 columns'>
            <h2 className='text--bold h2-headline-small' style=>{lang.CustomiseProject.customise_header}</h2>
          </div>
        </div>
        <div className='row grid__row--offset--5'>
          <div className='small-60 columns'>
            <form>
              {lang.ProjectDescription[0][service][bundle].customisation.map((customisation, index) => {
                return (
                  <div key={index} className='row grid__row--offset--10'>
                    <div className='small-3 columns'>
                      <input name={'option-' + (index + 1)} id={'customisation-' + index} onChange={this.handleInputChange} type='checkbox' style= />
                      <Checkbox onChange={this.handleInputChange}>Checkbox</Checkbox>
                    </div>
                    <div className='small-56 medium-57 columns'>
                      <label style= htmlFor={'customisation-' + index}>{customisation}</label>
                    </div>
                  </div>
                )
              })}
            </form>
          </div>
        </div>
        <div className='row grid__row--offset--10'>
          <div className='small-20 columns'>
            <div className='hor-line--thin--light-grey' />
          </div>
        </div>
        <div className='row grid__row--offset--30'>
          <div className='small-25 columns'>
            <button className='button success radius expand' onClick={this.submitHandler} >{lang.CustomiseProject.submit_button}</button>
          </div>
        </div>
      </div>
    )
  }
}


const mapStateToProps = (state) => {
  return {
    specifyBundle: state.specifyBundle
  }
}


function mapDispatchToProps (dispatch) {
  return bindActionCreators({submitBundle: submitBundle, specifyBundle: specifyBundle}, dispatch)
}



const {object, string, func} = React.PropTypes
CustomiseProject.propTypes = {
  lang: object.isRequired,
  service: string.isRequired,
  bundle: string.isRequired,
  submitBundle: func,
  specifyBundle: func
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CustomiseProject))