Skip to main content

13.14 Handling Overall Form Validity

Button.js

Button.js
import React from "react";
import classes from "./Button.module.css";

const button = (props) => (
<button
disabled={props.disabled}
className={[classes.Button, classes[props.btnType]].join(" ")}
onClick={props.clicked}
>
{props.children}
</button>
);

export default button;

Button.module.css

Button.module.css
.Button {
background-color: transparent;
border: none;
color: white;
outline: none;
cursor: pointer;
font: inherit;
padding: 10px;
/* margin: 10px; */
font-weight: bold;
}

.Button:first-of-type {
margin-left: 0;
padding-left: 0;
}

.Button:disabled {
color: #ccc;
cursor: not-allowed;
}

.Success {
color: #5c9210;
}

.Danger {
color: #944317;
}

ContactData.js

ContactData.js
import React, { Component } from "react";
import axios from "../../../axios-orders";
import Button from "../../../components/UI/Button/Button";
import Input from "../../../components/UI/Input/Input";
import Spinner from "../../../components/UI/Spinner/Spinner";
import classes from "./ContactData.module.css";

class ContactData extends Component {
state = {
orderForm: {
name: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Name",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
street: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Street",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
zipCode: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "ZIP Code",
},
value: "",
validation: {
required: true,
minLength: 5,
maxLength: 5,
},
valid: false,
touched: false,
},
country: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Country",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
email: {
elementType: "input",
elementConfig: {
type: "email",
placeholder: "Your e-mail",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
deliveryMethod: {
elementType: "select",
elementConfig: {
options: [
{ value: "fastest", displayValue: "Fastest" },
{ value: "cheapest", displayValue: "Cheapest" },
],
},
value: "",
valid: true,
validation: {
required: false,
},
},
},
formIsValid: false,
loading: false,
};

orderHandler = (event) => {
event.preventDefault();
this.setState({ loading: true });
const formData = {};
for (let formElementIdentifier in this.state.orderForm) {
formData[formElementIdentifier] = this.state.orderForm[
formElementIdentifier
].value;
}
const order = {
ingredients: this.props.ingredients,
price: this.props.price,
orderData: formData,
};
axios
.post("/orders.json", order)
.then((response) => {
this.setState({ loading: false });
this.props.history.push("/");
})
.catch((error) => {
this.setState({ loading: false });
});
};

checkValidity(value, rules) {
let isValid = true;
if (rules.required) {
isValid = value.trim() !== "" && isValid;
}

if (rules.minLength) {
isValid = value.length >= rules.minLength && isValid;
}

if (rules.maxLength) {
isValid = value.length <= rules.maxLength && isValid;
}

return isValid;
}

inputChangedHandler = (event, inputIdentifier) => {
const updatedOrderForm = {
...this.state.orderForm,
};
const updatedFormElement = {
...updatedOrderForm[inputIdentifier],
};
updatedFormElement.value = event.target.value;
updatedFormElement.valid = this.checkValidity(
updatedFormElement.value,
updatedFormElement.validation
);
updatedFormElement.touched = true;
updatedOrderForm[inputIdentifier] = updatedFormElement;

let formIsValid = true;
for (let inputIdentifier in updatedOrderForm) {
formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
}
this.setState({ orderForm: updatedOrderForm, formIsValid: formIsValid });
};
render() {
const formElementsArray = [];
for (let key in this.state.orderForm) {
formElementsArray.push({
id: key,
config: this.state.orderForm[key],
});
}
let form = (
<form onSubmit={this.orderHandler}>
{formElementsArray.map((formElement) => (
<Input
key={formElement.id}
elementType={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value}
invalid={!formElement.config.valid}
shouldValidate={formElement.config.validation}
touched={formElement.config.touched}
changed={(event) => this.inputChangedHandler(event, formElement.id)}
/>
))}
<Button btnType="Success" disabled={!this.state.formIsValid}>
ORDER
</Button>
</form>
);
if (this.state.loading) {
form = <Spinner />;
}
return (
<div className={classes.ContactData}>
<h4>Enter your Contact Data</h4>
{form}
</div>
);
}
}
export default ContactData;