In React Or Any JavaScript Web Application ,it is big challenging job to provide Valid Warning Message to User to provide Valid Data.
Today I just show to you with small program to fulfilled this challenging job in very easy way.
Now times to show Code;
First we Create A Method who Validate Out model .
//Note validateModel and validateModelData are javascript Object.
validateModel is our Model where we store our form data and
validateModelData is model where we store out Validation message regarding our form Model with same key with Validation message .
export const ValidateMyModel = (validateModel, validateModelData) => {
const validateFilterModel = {};
const ReturnErrorList = [];
for (const [key, value] of Object.entries(validateModelData)) {
if (validateModel.hasOwnProperty(key)) {
validateFilterModel[key] = validateModel[key];
}
}
for (const [key, value] of Object.entries(validateFilterModel)) {
if (!value)
{
ReturnErrorList.push(validateModelData[key]);
}
}
return ReturnErrorList;
}
*Now Time To implement this ValidateMyModel() on submit button.
I call a function submitData() on button click to save data.
*
const submitData = () => {
const ErrorList = ValidateMyModel(modelData, RequiredFiledModel);
if (ErrorList.length === 0) {
if (TermsCondition) {
alert("Data Successfully Saved")
}
else {
alert("Please accept Terms and Condition");
}
}
else {
alert(ErrorList.toString());
}
}
*Now I share With You all Code below
*
1) App.js File
import { useState } from 'react';
import './App.css';
import { countryList, DetailsModel, monthNames, RangeData, ValidateMyModel, RequiredFiledModel } from './Model/Model';
function App() {
const [modelData, setModelData] = useState(DetailsModel);
const { Name, Gender, Phone, Birthdate, BirthdateMonth, BirthdateYear,TermsCondition,Street,Nationality,City,Country } = modelData;
const onInputChange = (event) => {
const { name, value } = event.target;
if (name === "TermsCondition") {
if (event.target.checked) {
setModelData((pre) => ({ ...pre, [name]: true }));
}
else {
setModelData((pre) => ({ ...pre, [name]: false }));
}
}
else {
setModelData((pre) => ({ ...pre, [name]: value }));
}
}
const submitData = () => {
const ErrorList = ValidateMyModel(modelData, RequiredFiledModel);
if (ErrorList.length === 0) {
if (TermsCondition) {
alert("Data Successfully Saved")
}
else {
alert("Please accept Terms and Condition");
}
}
else {
alert(ErrorList.toString());
}
}
return (
<>
<div className="main-block">
<div className="formBody">
<h1>Model Validate Example</h1>
<fieldset>
<legend>
<h3>Personal Details</h3>
</legend>
<div className="personal-details">
<div>
<div><label>Name*</label><input type="text" name="Name" value={Name } onChange={(e) => { onInputChange(e)} } /></div>
<div><label>Phone*</label><input type="text" name="Phone" value={Phone} onChange={(e) => { onInputChange(e)} } /></div>
<div><label>Street</label><input type="text" name="Street" value={Street } onChange={(e) => { onInputChange(e)} } /></div>
<div><label>City*</label><input type="text" name="City" value={City } onChange={(e) => { onInputChange(e)} } /></div>
<div>
<label>Country*</label>
<select name="Country" value={Country} onChange={(e) => { onInputChange(e) }} >
<option value=""></option>
{countryList.map((item, index) => (
<option key={index + "Country"} value={item} >{item}</option>
))}
</select>
</div>
</div>
<div>
<div>
<label>Gender*</label>
<div className="gender">
<input type="radio" value="Male" id="male" name="Gender" onChange={(e) => { onInputChange(e)} } />
<label htmlFor="male" className="radio">Male</label>
<input type="radio" value="Female" id="female" name="Gender" onChange={(e) => { onInputChange(e)} } />
<label htmlFor="female" className="radio">Female</label>
</div>
</div>
<div className="birthdate">
<label>Birthdate*</label>
<div className="bdate-block">
<select className="day" name="Birthdate" value={Birthdate} onChange={(e) => { onInputChange(e) }} >
<option value=""></option>
{
RangeData(1,31)?.map((item, index) => (
<option key={index + "Date"} value={"0" + item}>{"0" + item}</option>
))
}
</select>
<select className="month" value={BirthdateMonth} name="BirthdateMonth" onChange={(e) => { onInputChange(e)} } >
<option value=""></option>
{monthNames.map((item, index) => (
<option key={index + "month"} value={item} >{item}</option>
))}
</select>
<input type="text" name="BirthdateYear" value={BirthdateYear } onChange={(e) => { onInputChange(e)} } />
</div>
</div>
<div>
<label>Nationality*</label>
<select name="Nationality" value={Nationality} onChange={(e) => { onInputChange(e)} } >
<option value=""></option>
{countryList.map((item, index) => (
<option key={index + "Nationality"} value={item} >{item }</option>
))}
</select>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h3>Terms and Condition</h3>
</legend>
<div className="terms-mailing">
<div className="checkbox">
<input type="checkbox" name="TermsCondition" checked={TermsCondition} onChange={(e) => { onInputChange(e) }} /><span>I accept the <a href="https://biharisoft.com/EduBox/">Biharisoft</a></span>
</div>
</div>
</fieldset>
<button type="submit" onClick={() => { submitData()} }>Submit</button>
</div>
</div>
</>
);
}
export default App;
2) Mode.js
export const DetailsModel = {
Name:"",
Gender:"",
Phone:"",
Birthdate:"",
Street: "",
Nationality: "",
City:"",
Country: "",
BirthdateMonth: "",
BirthdateYear: "",
TermsCondition: false
};
export const RequiredFiledModel = {
Name: "Name Required",
Phone: "Phone Required",
Birthdate: "Birth Date Required",
Nationality: "Nationality Required",
Country: "Country Required",
BirthdateMonth: "Birth Month Required",
BirthdateYear: "Birth Year Required"
};
export const countryList = [
"Afghanistan",
"India",
"Indonesia",
"Iran (Islamic Republic of)",
"Nepal",
"United Kingdom of Great Britain and Northern Ireland (the)",
"United States Minor Outlying Islands (the)",
"United States of America (the)",
];
export const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
export const RangeData = (startVal, RangeVal) => {
const List = [];
for (let i = startVal; i <= RangeVal; i++) {
List.push(i);
}
return List;
}
export const ValidateMyModel = (validateModel, validateModelData) => {
console.log(validateModel);
const validateFilterModel = {};
const ReturnErrorList = [];
for (const [key, value] of Object.entries(validateModelData)) {
if (validateModel.hasOwnProperty(key)) {
validateFilterModel[key] = validateModel[key];
}
}
for (const [key, value] of Object.entries(validateFilterModel)) {
if (!value)
{
ReturnErrorList.push(validateModelData[key]);
}
}
return ReturnErrorList;
}
3)App.css
html, body {
min-height: 100%;
}
body, div, form, input, select, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
}
h1 {
margin: 0;
font-weight: 400;
}
h3 {
margin: 12px 0;
color: #8ebf42;
}
.main-block {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.formBody {
width: 100%;
padding: 20px;
}
fieldset {
border: none;
border-top: 1px solid #8ebf42;
}
.account-details, .personal-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.account-details > div, .personal-details > div > div {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.account-details > div, .personal-details > div, input, label {
width: 100%;
}
label {
padding: 0 5px;
text-align: right;
vertical-align: middle;
}
input {
padding: 5px;
vertical-align: middle;
}
.checkbox {
margin-bottom: 10px;
}
select, .children, .gender, .bdate-block {
width: calc(100% + 26px);
padding: 5px 0;
}
select {
background: transparent;
}
.gender input {
width: auto;
}
.gender label {
padding: 0 5px 0 0;
}
.bdate-block {
display: flex;
justify-content: space-between;
}
.birthdate select.day {
width: 49px;
}
.birthdate select.month {
width: calc(100% - 94px);
}
.birthdate input {
width: 38px;
vertical-align: unset;
}
.checkbox input, .children input {
width: auto;
margin: -2px 10px 0 0;
}
.checkbox a {
color: #8ebf42;
}
.checkbox a:hover {
color: #82b534;
}
button {
width: 100%;
padding: 10px 0;
margin: 10px auto;
border-radius: 5px;
border: none;
background: #8ebf42;
font-size: 14px;
font-weight: 600;
color: #fff;
}
button:hover {
background: #82b534;
}
@media (min-width: 568px) {
.account-details > div, .personal-details > div {
width: 50%;
}
label {
width: 40%;
}
input {
width: 60%;
}
select, .children, .gender, .bdate-block {
width: calc(60% + 16px);
}
}
Well done! You now have Done Form Model Validation in React Web App!
Drop some love by liking or commenting ♥
Reference w3schools
Top comments (0)