React Superform: Zurb Foundation 4 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://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.css">
<div id="root"></div>

CSS

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

Babel + JSX

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

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

  render() {
    return (
      <div className="row">
        <div className="small-12 medium-9 small-centered">
          <form noValidate onSubmit={ this.handleSubmit.bind(this) }>
            <div className={`callout callout-signup`}>
              <h3>Sign up</h3>
              <hr/>

              { this.isSubmited() && !this.isFormValid() ?
                <div className="alert callout">
                  <p>There are some errors in your form.</p>
                </div>
                : null
              }

              <label className={ this.getErrorMessageOf("email") ? "is-invalid-label" : ""}>
                Email
                <input
                  type="email" className={ this.getErrorMessageOf("email") ? "is-invalid-input" : ""}
                  name="email" id="email" ref="email" valueLink={this.linkStateOf("email")} required/>
                <span className={`form-error ${ this.getErrorMessageOf("email") ? "is-visible" : ""}` }>{ this.getErrorMessageOf("email") }</span>
              </label>

              <label className={ this.getErrorMessageOf("password") ? "is-invalid-label" : ""}>
                Password
                <input
                  type="password" className={ this.getErrorMessageOf("password") ? "is-invalid-input" : ""}
                  name="password" id="password" ref="password" valueLink={this.linkStateOf("password")}
                  pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*" minLength="8" required
                  data-messages={JSON.stringify({
                    pattern: "Password must contain at least one digit, upper case and lower case letter",
                    minLength: "Password must contain at least :data...