Skip to content

Instantly share code, notes, and snippets.

@helloncanella
Created March 19, 2017 21:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save helloncanella/f2cfdfb4f2d350a6525e868b1ebc4e32 to your computer and use it in GitHub Desktop.
Save helloncanella/f2cfdfb4f2d350a6525e868b1ebc4e32 to your computer and use it in GitHub Desktop.
Raw version of a minimalist form
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