Skip to content

Instantly share code, notes, and snippets.

@nathansebhastian
Created December 28, 2018 03:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nathansebhastian/20a4261db5a24183adc89fd59a83a7fa to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
export default class InstantValidation extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
nameError: '',
emailError: ''
};
}
handleNameChange = event => {
this.setState({ name: event.target.value }, () => {
this.validateName();
});
};
handleEmailChange = event => {
this.setState({ email: event.target.value }, () => {
this.validateEmail();
});
};
validateName = () => {
const { name } = this.state;
this.setState({
nameError:
name.length > 3 ? null : 'Name must be longer than 3 characters'
});
}
validateEmail = () => {
const { email } = this.state;
this.setState({
emailError:
email.length > 3 ? null : 'Email must be longer than 3 characters'
});
}
handleSubmit = event => {
event.preventDefault();
const { name, email } = this.state;
alert(`Your state values: \n
name: ${name} \n
email: ${email}`);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className='form-group'>
<label htmlFor='name'>Name</label>
<input
name='name'
className={`form-control ${this.state.nameError ? 'is-invalid' : ''}`}
id='name'
placeholder='Enter name'
value={this.state.name}
onChange={this.handleNameChange}
onBlur={this.validateName}
/>
<div className='invalid-feedback'>{this.state.nameError}</div>
</div>
<div className='form-group'>
<label htmlFor='email'>Email</label>
<input
name='email'
className={`form-control ${this.state.emailError ? 'is-invalid' : ''}`}
id='email'
placeholder='Enter email'
value={this.state.email}
onChange={this.handleEmailChange}
onBlur={this.validateEmail}
/>
<div className='invalid-feedback'>{this.state.emailError}</div>
</div>
<button type='submit' className='btn btn-success btn-block'>
Submit
</button>
</form>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment