React js validation | simple form validation using react js | React get value of input on button click

simple form validation using react js functional component

 

•  App.js

import React from "react";

import "./styles.css";

import ValidationInReact from "./ValidationInReact";

export default function App() {

return (

<div className="App">

<h1>React js validation</h1>

<ValidationInReact />

</div>

);

}

• ValidationInReact.js

import React from "react";

class validationInReact extends React.Component {

constructor(props) {

super(props);

this.state = {

fields: {

firstName: "",

email: "",

password: "",

confirmPassword: "",

mobile: ""

},

errors: {

firstName: "",

email: "",

password: "",

mobile: "",

confirmPassword: ""

}

};

}

validate = (name, value) => {

const { fields } = this.state;

switch (name) {

case "firstName":

if (!value || value.trim() === "") {

return "First name is Required";

} else {

return "";

}

case "email":

if (!value) {

return "Email is Required";

} else if (

!value.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)

) {

return "Enter a valid email address";

} else {

return "";

}

case "mobile":

if (!value || value.trim() === "") {

return "Mobile number is Required";

} else if (!value.match(/^[6-9]\d{9}$/)) {

return "Enter a valid mobile number.";

} else {

return "";

}

case "password":

if (!value) {

return "Password is Required";

} else if (value.length < 8 || value.length > 15) {

return "Please fill at least 8 character";

} else if (!value.match(/[a-z]/g)) {

return "Please enter at least lower character.";

} else if (!value.match(/[A-Z]/g)) {

return "Please enter at least upper character.";

} else if (!value.match(/[0-9]/g)) {

return "Please enter at least one digit.";

} else {

return "";

}

case "confirmPassword":

if (!value) {

return "Confirm Password Required";

} else if (value !== fields.password) {

return "New Password and Confirm Password Must be Same";

} else {

return "";

}

default: {

return "";

}

}

};

handleUserInput = e => {

this.setState({

errors: {

...this.state.errors,

[e.target.name]: this.validate(e.target.name, e.target.value)

},

fields: {

...this.state.fields,

[e.target.name]: e.target.value

}

});

};

handleSubmit = e => {

const { fields } = this.state;

e.preventDefault();

let validationErrors = {};

Object.keys(fields).forEach(name => {

const error = this.validate(name, fields[name]);

if (error && error.length > 0) {

validationErrors[name] = error;

}

});

if (Object.keys(validationErrors).length > 0) {

this.setState({ errors: validationErrors });

return;

}

if (fields.firstName && fields.email && fields.password && fields.mobile) {

const data = {

firstName: fields.firstName,

email: fields.email,

password: fields.password,

mobile: fields.mobile

};

window.alert("subit success", JSON.stringify(data));

console.log("----data----", data);

}

};

render() {

const { fields, errors } = this.state;

return (

<div>

<div className="border">

<div>

<div>

<label>First name:</label>

<input

type="text"

name="firstName"

value={fields.firstName}

onChange={event => this.handleUserInput(event)}

placeholder="First Name"

/>

</div>

<div>

<span className="text-danger">{errors.firstName}</span>

</div>

</div>

<div>

<label>Email:</label>

<input

type="email"

name="email"

value={fields.email}

onChange={event => this.handleUserInput(event)}

placeholder="Email Address"

/>

<div>

<span className="text-danger">{errors.email}</span>

</div>

</div>

<div>

<label>Mobile:</label>

<input

name="mobile"

value={fields.mobile}

onChange={event => this.handleUserInput(event)}

placeholder="mobile"

/>

<div>

<span className="text-danger">{errors.mobile}</span>

</div>

</div>

<div>

<label>Password:</label>

<input

type="Password"

name="password"

value={fields.password}

onChange={event => this.handleUserInput(event)}

placeholder="Password"

/>

<div>

<span className="text-danger">{errors.password}</span>

</div>

</div>

<div>

<label>Confirm Password:</label>

<input

type="Password"

name="confirmPassword"

value={fields.confirmPassword}

onChange={event => this.handleUserInput(event)}

placeholder="confirm Password"

/>

<div>

<span className="text-danger">{errors.confirmPassword}</span>

</div>

</div>

</div>

<br />

<button

type="button"

className="login-button pointer"

onClick={this.handleSubmit}

>

Submit

</button>

</div>

);

}

}

export default validationInReact;

• index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

• styles.css

.App {

font-family: sans-serif;

text-align: center;

}

input {

background-repeat: no-repeat;

background-position: 6px;

border: 1px solid #dadada;

margin-top: 10px;

margin-bottom: 10px;

padding-left: 5px;

width: 310px;

height: 30px;

font-size: 14px;

}

.text-danger {

color: red;

}

• form validation in react js functional component codesandbox
• simple-react-validator in functional component
• login form validation in react js functional component
• form validation in react js using hooks
• form validation in react js example
• form validation in react js functional component stackblitz
• email validation in react js using functional component
• form validation in react js functional component github
• Infinite Scrolling in Next.js: A Comprehensive Implementation Guide for European Developers 
• vue js api data get and print in tabular sandbox | vue fetch data from api example | How to Use Vue.js and Axios to Display Data from an API