Wednesday, 12 April 2017

How to validate signup form in reactjs?

How to validate signup form in Reactjs, I have make below form component using input field. Field are Email, Password & Confirm Password. So kindly help me for validate these fields on client side and server side using reactjs.

   <form onSubmit={this.onRegistration} className="col-md-8">
      <h1 className="signup-header">Sign up</h1>&nbsp;
          <div className="form-goup">
            <lable className="control-lable" id="emailLabel"> <strong> Email </strong> </lable>
            <input className="form-control" 
              value={this.state.email}
              onChange={this.onChange}
              type="email"
              name="email"
              placeholder="Email"
              ref="email"
              />
            <div className="error" />
          </div>&nbsp;
          <div className="form-goup">
            <lable className="control-lable" id="passwordLabel"> <strong> Password </strong> </lable>
            <input className="form-control"
              value={this.state.password}
              onChange={this.onChange}
              type="password"
              name="password"
              placeholder="Password"
              ref="password"

              />
            <div className="error"  />
          </div>&nbsp;
          <div className="form-goup">
            <lable className="control-lable" id="passwordConfirmLabel"> <strong> Confirm Password </strong> </lable>
            <input className="form-control" 
              value={this.state.passwordConfirm}
              onChange={this.onChange}
              type="password"
              name="passwordConfirm"
              placeholder="Confirm Password"
              ref="passwordConfirm"
               />
            <div className="error"  />
          </div>&nbsp;
      <div className="form-goup">
        <button className="btn btn-success" > Sign up </button>
      </div>
    </form>
    </div>
     <Footer />
    </div>



via Himanshu Pandey

No comments:

Post a Comment