React

by Mehmet Demiray

HTML

<div id="app"></div>

CSS

.contactform{
  margin: 20px;
}

input{
  margin-bottom: 5px;
  height: 20px;
  border: 1px solid #d8d8d8;
  padding: 3px;
}

textarea{
  border: 1px solid #d8d8d8;
  padding: 3px;
}

button{
  padding: 10px;
  border: 1px solid #d8d8d8;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.error{
  margin-left: 5px;
  font-size: 13px;
  color: red;
}

React

class Test extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      fields: {},
      errors: {}
    }
  }

  handleValidation(){
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    //Email
    if(!fields["email"]){
      formIsValid = false;
      errors["email"] = "Cannot be empty";
    }

    if(typeof fields["email"] !== "undefined"){
      let lastAtPos = fields["email"].lastIndexOf('@');
      let lastDotPos = fields["email"].lastIndexOf('.');

      if (!(lastAtPos < lastDotPos 
      		&& lastAtPos > 0 
          && fields["email"].indexOf('@@') == -1 
          && lastDotPos > 2 
          && (fields["email"].length - lastDotPos) > 2)) {
            formIsValid = false;
            errors["email"] = "Email is not valid";
      }
    }



    this.setState({errors: errors});
    return formIsValid;
  }

  inviteSubmit(e){
    e.preventDefault();
    if(this.handleValidation()){
      alert("Form submitted");
    }else{
      alert("Form has errors.")
    }

  }

  handleChange(field, e){    		
    let fields = this.state.fields;
    fields[field] = e.target.value;        
    this.setState({fields});
  }

  render(){
    return (
      <div>        	
        <form name="contactform" className="contactform" onSubmit= {this.inviteSubmit.bind(this)}>
              <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>
              <span className="error">{this.state.errors["email"]}</span>
  
              <button className="btn btn-lg pro" id="submit" value="Submit">Send Message</button>

        </form>
      </div>
    )
  }
}

ReactDOM.render(<Test />, document.querySelector("#app"))