install bootstrap
C:\reactdev\myreactdev>npm install bootstrap
add to src/index.js
import 'bootstrap/dist/css/bootstrap.css';
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS Form with Validation</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { Component } from 'react';
import './App.css';
import Form from './Form.js';
class App extends Component {
render() {
return (
<div className="App">
<Form />
</div>
);
}
}export default App;
src/Form.js
//src/Form.js
import React, { Component } from 'react';
import { FormValidation } from './FormValidation';
class Form extends Component {
constructor (props) {
super(props);
this.state = {
email: '',
password: '',
FormValidation: {email: '', password: ''},
validateEmail: false,
validatePassword: false,
validateForm: false
}
}
validateUserInput = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value},
() => { this.validateInputField(name, value) });
}
validateInputField(inputField, value) {
let inputFieldErrors = this.state.FormValidation;
let validateEmail = this.state.validateEmail;
let validatePassword = this.state.validatePassword;
switch(inputField) {
case 'email':
validateEmail = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
inputFieldErrors.email = validateEmail ? '' : ' is invalid!';
break;
case 'password':
validatePassword = value.length >= 6;
inputFieldErrors.password = validatePassword ? '': ' is too short!';
break;
default:
break;
}
this.setState({FormValidation: inputFieldErrors,
validateEmail: validateEmail,
validatePassword: validatePassword
}, this.validateForms);
}
validateForms() {
this.setState({validateForm: this.state.validateEmail && this.state.validatePassword});
}
cmdSubmit(event) {
alert('You have entered the email and passwor successfully.');
event.preventDefault();
}
render () {
return (
<div className="container">
<div className="col-md-6 mx-auto text-center">
<div className="header-title">
<h1 className="wv-heading--title">
ReactJS Form with Validation
</h1>
<h2 className="wv-heading--subtitle">
React bootstrap
</h2>
</div>
</div>
<div className="row">
<div className="col-md-6 mx-auto">
<div className="myform form ">
<form className="signupForm" onSubmit={this.cmdSubmit}>
<h5>Sign up Form</h5>
<div className="panel panel-default">
<FormValidation FormValidation={this.state.FormValidation} />
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input type="email" required className="form-control" name="email"
placeholder="Email"
value={this.state.email}
onChange={this.validateUserInput} />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" name="password"
placeholder="Password"
value={this.state.password}
onChange={this.validateUserInput} />
</div>
<br/>
<div className="text-center">
<button type="submit" className="btn btn-primary send-button" disabled={!this.state.validateForm}>Sign up</button>
</div>
<div className="col-md-12 ">
<div className="login-or">
<hr className="hr-or"/>
<span className="span-or">or</span>
</div>
</div>
<div className="form-group">
<button type="submit" className="btn btn-block g-button">
<i className="fa fa-google"></i> Sign up with Google
</button>
</div>
<p className="small mt-3">By signing up, you are indicating that you have read and agree to the Terms of Use and Privacy Policy.
</p>
</form>
</div>
</div>
</div>
</div>
)
}
}
export default Form;
src/FormValidation.js
//src/FormValidation.js
import React from 'react';
export const FormValidation = ({FormValidation}) =>
<div className='FormValidation'>
{Object.keys(FormValidation).map((fieldName, i) => {
if(FormValidation[fieldName].length > 0){
return (
<p class="alert alert-danger" key={i}>{fieldName} {FormValidation[fieldName]}</p>
)
} else {
return '';
}
})}
</div>
//src/App.css
.send-button{
width:100%;
font-weight: 600;
color:#fff;
padding: 8px 25px;
}
.g-button{
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width:100%;
font-weight: 600;
color:#fff;
padding: 8px 25px;
}
.my-input{
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
}
.header-title{
margin: 5rem 0;
}
h1{
font-size: 31px;
line-height: 40px;
font-weight: 600;
color:#4c5357;
}
h2{
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
.login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
@media screen and (max-width:480px){
h1{
font-size: 26px;
}
h2{
font-size: 20px;
}
}
