Created
March 19, 2017 21:22
-
-
Save helloncanella/f2cfdfb4f2d350a6525e868b1ebc4e32 to your computer and use it in GitHub Desktop.
Raw version of a minimalist form
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' | |
export default 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> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment