// Не знаю зачем я это написал, наверное чтобы показать что я могу наговнодить
import { Validation } from "./Validation";
const API_URL = "https://jsonplaceholder.typicode.com/posts";
export default class Form extends Validation {
constructor(form, label = ".js-label-input") {
super();
this.form = form;
this.label = label;
this.formStatus = false;
this.listener();
}
validation(target) {
if (this.validate(target)) {
return true;
} else {
return false;
}
}
data(e) {
const inputs = e.target.querySelectorAll(`${this.label} input, ${this.label} textarea`);
console.log(inputs);
const inputsValues = [...inputs].map((elem) => {
return elem.value;
});
console.log(inputsValues);
return inputsValues;
}
submit(e) {
const inputsValues = this.data(e);
fetch(API_URL, {
method: "POST",
body: JSON.stringify({ ...inputsValues }),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((res) => res.json())
.then((json) => console.log(json));
}
listener() {
document.addEventListener("submit", (e) => {
if (e.target.closest(this.form)) {
const inputs = e.target.querySelectorAll(`${this.label} input, ${this.label} textarea`);
e.preventDefault();
inputs.forEach((elem) => {
if (this.validation(elem)) {
this.formStatus = true;
e.target.classList.add("success");
elem.classList.remove("validate-error");
setTimeout(() => {
e.target.classList.remove("success");
}, 3000);
} else {
elem.classList.add("validate-error");
}
});
if (this.formStatus) {
this.submit(e);
inputs.forEach((elem) => (elem.value = ""));
}
}
});
}
}