Hi everyone,
I hope you are all well and in health.
I am currently having issues with a stateful react contact form in neatly. I am getting the console output of: ‘Failed to load resource: the server responded with a status of 404 ()’.
does anyone know anything about it?
please find the code below
import React from “react”;
import ReactFormValidation from “react-form-input-validation”;
import ‘./ValidationForm.css’;
const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
}
class ValidationForm extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: {
customer_name: "",
customer_Surname: "",
email_address: "",
phone_number: "",
house_address: "",
pickupTratment: "",
comments: "",
AddOns: []
},
errors: {}
};
this.form = new ReactFormValidation(this, { locale: "en" });
this.form.useRules({
customer_name: "required|username_available",
email_address: "required|email",
house_address: "required|address",
phone_number: "required|numeric|digits_between:10,12",
pickup_time: "required|date",
pickup_treatment: "requred|treatmet",
comments: "required|max:200",
});
onsubmit = ( event) => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...this.state })
})
.then(() => alert("Success!"))
.catch(error => alert(error));
event.preventDefault();
}
ReactFormValidation.registerAsync('username_available', function(username, attribute, req, passes) {
setTimeout(() => {
if (username === "foo")
passes(false, 'Username has already been taken.'); // if username is not available
else
passes();
}, 1000);
});
let messages = ReactFormValidation.getMessages('en');
messages.required = 'Whoops, :attribute field is required.';
ReactFormValidation.setMessages('en', messages);
ReactFormValidation.useLang('en')
}
// when submit btn is clicked
render() {
return (
<div className="container">
<form
method="POST"
type="file"
data-netlify="true"
name="contact"
className="myForm"
autoComplete="off"
onSubmit={this.handleSubmit}
>
<p>
<h3 className="text-centre-form">Book your treatment!</h3>
<label>
Name
<input
type="text"
name="customer_name"
onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent}
value={this.state.fields.customer_name}
// To override the attribute name
data-attribute-name="Customer Name"
data-async
/>
</label>
<label className="error">
{this.state.errors.customer_name
? this.state.errors.customer_name
: ""}
</label>
</p>
<p>
<label>
Surname
<input
type="text"
name="customer_Surname"
onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent}
value={this.state.fields.customer_surname}
// To override the attribute name
data-attribute-name="Customer Surname"
data-async
/>
</label>
<label className="error">
{this.state.errors.customer_Surname
? this.state.errors.customer_Surname
: ""}
</label>
</p>
<p>
<label>
Phone
<input
type="tel"
name="phone_number"
onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent}
value={this.state.fields.phone_number}
/>
</label>
<label className="error">
{this.state.errors.phone_number
? this.state.errors.phone_number
: ""}
</label>
</p>
<p>
<label>
Email
<input
type="email"
name="email_address"
onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent}
value={this.state.fields.email_address}
/>
</label>
<label className="error">
{this.state.errors.email_address
? this.state.errors.email_address
: ""}
</label>
</p>
<p>
<label>
Address
<input
type="text"
name="house_address"
onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent}
value={this.state.fields.house_address}
/>
</label>
<label className="error">
{this.state.errors.house_address
? this.state.errors.house_address
: ""}
</label>
</p>
<p>
<label>
Pickup treatments
<select
id="pickup_treatment"
name="pickup_tratment"
value={this.state.fields.pickup_treatment}
onChange={this.form.handleChangeEvent}
onBlur={this.form.handleBlurEvent}
>
<option value="Waxing">Waxing</option>
<option value="Facial">Facial</option>
<option value="Massage">Massage</option>
<option value="Yoga">Yoga</option>
<option value="Manicure">Manicure</option>
<option value="Pedicure">Pedicure</option>
<option value="">Shellac Manicure</option>
<option value="Yoga">Shellac Pedicure</option>
</select>
</label>
<label className="error">
{this.state.errors.pickup_place
? this.state.errors.pickup_place
: ""}
</label>
</p>
<fieldset>
<legend>Add ons treatments</legend>
<p>
<label className="choice">
{" "}
<input
type="checkbox"
name="AddOns"
onChange={this.form.handleChangeEvent}
value="shellac removal"
/>{" "}
Shellac removal{" "}
</label>
</p>
<p>
<label className="choice">
{" "}
<input
type="checkbox"
name="addOns"
onChange={this.form.handleChangeEvent}
value="Nails Repeir"
/>{" "}
Nails Repeir{" "}
</label>
</p>
<p>
<label className="choice">
{" "}
<input
type="checkbox"
name="addOns"
onChange={this.form.handleChangeEvent}
value="wax"
/>{" "}
Upper lips wax{" "}
</label>
</p>
<label className="option">
{this.state.errors.addOns
? this.state.option.addOns
: ""}
</label>
</fieldset>
<p>
<label>
Pickup Date
<input
type="date"
name="pickup_time"
onChange={this.form.handleChangeEvent}
onBlur={this.form.handleBlurEvent}
value={this.state.fields.pickup_time}
/>
</label>
<label className="error">
{this.state.errors.pickup_time
? this.state.errors.pickup_time
: ""}
</label>
</p>
<p>
<label>
Specify treatment
<textarea
type="file"
name="comments"
maxLength="200"
value={this.state.fields.comments}
onChange={this.form.handleChangeEvent}
onBlur={this.form.handleBlurEvent}
></textarea>
</label>
<label className="error">
{this.state.errors.comments
? this.state.errors.comments
: ""}
</label>
</p>
<p>
<button className="form-button" type="submit">Submit Booking</button>
</p>
</form>
</div>
);
}
}
export default ValidationForm;