Last active
March 19, 2017 22:11
-
-
Save helloncanella/a291d74a635f2015c059b64807e65679 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react' | |
import './style.scss' | |
class Form extends Component { | |
constructor() { | |
super() | |
this.state = { | |
sentData: false | |
} | |
this.validateFields = this.validateFields.bind(this) | |
} | |
validateEmail(email) { | |
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
return re.test(email); | |
} | |
validateFields(username, email, password, confirmationPassword) { | |
if (!(username && email && password && confirmationPassword)) { | |
this.setState({ error: 'one or more fields are empty' }) | |
return false; | |
} else if (!this.validateEmail(email)) { | |
this.setState({ error: 'email format is not correct' }) | |
return false; | |
} else if (password !== confirmationPassword) { | |
this.setState({ error: 'passwords don\'t match' }) | |
return false; | |
} | |
return true; | |
} | |
fetchData() { | |
var data = [] | |
var elements = this.form.querySelectorAll('input:not(*[type="submit"])') | |
elements.forEach(({ name, value, type, checked }) => { | |
data[name] = value | |
}) | |
return data | |
} | |
send(data){ | |
//send data algorithm | |
this.setState({sentData: true}) | |
} | |
onSubmit(e) { | |
e.preventDefault() | |
var data = this.fetchData() | |
var email = data.email | |
var password = data.password | |
var confirmationPassword = data['password-confirmation'] | |
var username = data.username | |
if (this.validateFields(username, email, password, confirmationPassword)) { | |
this.send(data) | |
} | |
} | |
render() { | |
return ( | |
this.state.sentData ? | |
<h1 className="sent">Sent</h1> | |
: | |
<div className="form-wrapper"> | |
<h1>A beautiful form</h1> | |
<form onSubmit={this.onSubmit.bind(this)} ref={e => this.form = e}> | |
<div className="content"> | |
<h4 className="error">{this.state.error}</h4> | |
<input type="text" name="username" placeholder="username" /> | |
<input type="text" name="email" placeholder="email"/> | |
<input type="password" name="password" placeholder="password" /> | |
<input type="password" name="password-confirmation" placeholder="password confirmation" /> | |
<input type="submit" /> | |
</div> | |
</form> | |
</div> | |
) | |
} | |
} | |
export default Form |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment