1    class Test extends React.Component {
2        constructor(props){
3           super(props);
4      
5           this.state = {
6               fields: {},
7               errors: {}
8           }
9        }
10    
11        handleValidation(){
12            let fields = this.state.fields;
13            let errors = {};
14            let formIsValid = true;
15
16            //Name
17            if(!fields["name"]){
18               formIsValid = false;
19               errors["name"] = "Cannot be empty";
20            }
21      
22            if(typeof fields["name"] !== "undefined"){
23               if(!fields["name"].match(/^[a-zA-Z]+$/)){
24                  formIsValid = false;
25                  errors["name"] = "Only letters";
26               }        
27            }
28       
29            //Email
30            if(!fields["email"]){
31               formIsValid = false;
32               errors["email"] = "Cannot be empty";
33            }
34      
35            if(typeof fields["email"] !== "undefined"){
36               let lastAtPos = fields["email"].lastIndexOf('@');
37               let lastDotPos = fields["email"].lastIndexOf('.');
38
39               if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
40                  formIsValid = false;
41                  errors["email"] = "Email is not valid";
42                }
43           }  
44
45           this.setState({errors: errors});
46           return formIsValid;
47       }
48        
49       contactSubmit(e){
50            e.preventDefault();
51
52            if(this.handleValidation()){
53               alert("Form submitted");
54            }else{
55               alert("Form has errors.")
56            }
57      
58        }
59    
60        handleChange(field, e){         
61            let fields = this.state.fields;
62            fields[field] = e.target.value;        
63            this.setState({fields});
64        }
65    
66        render(){
67            return (
68                <div>           
69                   <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}>
70                        <div className="col-md-6">
71                          <fieldset>
72                               <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/>
73                               <span style={{color: "red"}}>{this.state.errors["name"]}</span>
74                              <br/>
75                             <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>
76                             <span style={{color: "red"}}>{this.state.errors["email"]}</span>
77                             <br/>
78                             <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/>
79                             <br/>
80                             <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/>
81                             <br/>
82                         </fieldset>
83                      </div>
84          
85                  </form>
86                </div>
87          )
88        }
89    }
90
91    React.render(<Test />, document.getElementById('container'));
92
93

1if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
2