React Superform: Bootstrap 3 Sign Up Form

by Michał Załęcki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/4.0.5/validator.js"></script>
<script src="https://raw.githack.com/MichalZalecki/react-superform/master/lib/react-superform.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="root"></div>

CSS

.panel-signup {
  margin: 60px auto;
}

Babel + JSX

class MyForm extends Superform {
  onSuccessSubmit(data) {
    // alert(`Success submit with:\n${JSON.stringify(data, 2, 2)}`);
  }

  onErrorSubmit(errors, data) {
    // alert(`Error submit with:\n${JSON.stringify(data, 2, 2)}\n and errors:\n${JSON.stringify(errors, 2, 2)}`);
  }

  render() {
    return (
      <div className="container">
        <div className="col-xs-12 col-md-6 col-md-offset-3">
          <form noValidate onSubmit={ this.handleSubmit.bind(this) }>
            <div
              className={`panel panel-signup
                ${!this.isSubmited() ? "panel-primary": ""}
                ${this.isSubmited() && this.isFormValid() ? "panel-success": ""}
                ${this.isSubmited() && !this.isFormValid() ? "panel-danger": ""}
              `}>
              <div className="panel-heading">Sign up</div>
              <div className="panel-body">
                <div className={`form-group ${this.getErrorMessageOf("email") ? "has-error" : "" }`}>
                  <label className="control-label" htmlFor="email">Email</label>
                  <input
                    type="email" className="form-control" name="email" id="email" ref="email"
                    valueLink={this.linkStateOf("email")} required/>
                  <span className="help-block">{ this.getErrorMessageOf("email") }</span>
                </div>

                <div className={`form-group ${this.getErrorMessageOf("password") ? "has-error" : "" }`}>
                  <label className="control-label" htmlFor="password">Password</label>
                  <input
                    type="password" className="form-control" name="password" id="password" ref="password"
                    valueLink={this.linkStateOf("password")} pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*"
                    data-messages={JSON.stringify({
                      pattern: "Password must contain at least one digit, upper case and lower case letter",
                      minLength: "Password...