Multistep wizard form with validation

registration_step_1.jsx

var RetreatAttendeeRegistrationStart = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Retreat Attendee Registration</h1>
        <div className="form-group">
          <label>First Name</label>
          <input type="text"
                 id="first_name"
                 ref="first_name"
                 className="form-control"
                 defaultValue={this.props.fieldValues.first_name} />
        </div>
        <div className="form-group">
          <label>Last Name</label>
          <input type="text"
                 id="last_name"
                 ref="last_name"
                 className="form-control"
                 defaultValue={this.props.fieldValues.last_name} />
        </div>
        <div className="form-group">
          <label>Email Address</label>
          <input type="email"
                 id="email_address"
                 ref="email_address"
                 className="form-control"
                 required={true}
                 defaultValue={this.props.fieldValues.email_address} />
        </div>
        <div>
          <button type="submit" className="btn btn-primary btn-retreat-attendee-registration" onClick={this.nextStep}>Save &amp; Continue</button>
        </div>
      </div>
    );
  },

  nextStep: function(e) {
    e.preventDefault()

    first_name    = this.refs.first_name.value
    last_name     = this.refs.last_name.value
    email_address = this.refs.email_address.value

    if (typeof first_name == "undefined" || !first_name) {
      errorMessageNotify("Your first name is not valid", "#first_name")
    } 
    else if (typeof last_name == "undefined" || !last_name) {
      errorMessageNotify("Your last name is not valid", "#last_name")
    }
    else if (!validateEmail(email_address)) {
      errorMessageNotify("Your email is not valid", "#email_address")
    } 
    else {
      var data = {
        first_name    : upperCaseFirstLetter(first_name),
        last_name     : upperCaseFirstLetter(last_name),
        email_address : email_address.toLowerCase()
      }

      $.ajax({
        type          : 'POST',
        url           : 'https://hooks.zapier.com/hooks/catch/60976/uafnaw/',
        data          : data,
        contentType   : 'application/x-www-form-urlencoded',
        dataType      : "json",
      });

      this.props.saveValues(data)
      this.props.nextStep()
    }
  }

});