폼검증2

폼검증을 조금 수정했다 여기서 조금 미완성인 부분이 틀렸을때 보여줘야하는 텍스트 대상을 완벽하게 못잡는거다

class FormValidator {
	constructor(form, fields) {
		this.form = form;
		this.fields = fields;
	}

	initialize() {
		this.validateOnEntry(); // 실시간 감지
		// this.validateOnSubmit();
		this.validateOnSubmit2();
	}

	initialize_nullTrue() {
		this.validateOnEntry(true); // 실시간 감지
		// this.validateOnSubmit();
		this.validateOnSubmit2(true);
	}

	validateOnSubmit() {
		let self = this;

		this.form.addEventListener("submit", (e) => {
			e.preventDefault();
			self.fields.forEach((field) => {
				const input = document.getElementsByName(`${field}`);

				if (input[0].type == "checkbox") {
					self.validateFields_Checkbox(input[0], field);
				} else if (input[0].type == "select-one") {
					self.validateFields_Selectbox(input[0]);
				} else {
					self.validateFields(input);
				}
			});
		});
	}

	validateOnSubmit2(isnull = false) {
		// e.preventDefault();
		let self = this;
		self.fields.forEach((field) => {
			const input = document.getElementsByName(`${field}`);

			if (input[0]) {
				if (input[0].type == "checkbox") {
					self.validateFields_Checkbox(input[0], field, isnull);
				} else if (input[0].type == "select-one") {
					self.validateFields_Selectbox(input[0], isnull);
				} else {
					self.validateFields(input, isnull);
				}
			}
		});
	}

	validateOnEntry(isnull = false) {
		let self = this;
		this.fields.forEach((field) => {
			const input = document.getElementsByName(`${field}`);

			if (input[0]) {
				if (input[0].type == "checkbox") {
					input[0].addEventListener("input", (event) => {
						self.validateFields_Checkbox(input[0], field, isnull);
					});
				} else if (input[0].type == "select-one") {
					input[0].addEventListener("input", (event) => {
						self.validateFields_Selectbox(input[0], isnull);
					});
				} else {
					input[0].addEventListener("input", (event) => {
						self.validateFields(input, isnull);
					});
				}
			}
		});
	}

	validateFields(fields, isnull = false) {
		let formval_min = fields[0].getAttribute("formval_min");
		let formval_max = fields[0].getAttribute("formval_max");

		fields.forEach((field) => {
			if (field.value.trim() === "" && !isnull) {
				this.setStatus(field, `${field.parentElement.parentElement.querySelector("label").innerText} 을/를 입력해주세요`, "error");
			} else {
				if (field.value.trim() !== "") {
					this.setStatus(field, null, "success");
				}

				if (field.type === "text") {
					if (formval_max && formval_min) {
						if (formval_max < field.value.trim().length || formval_min > field.value.trim().length) {
							this.setStatus(field, formval_min + "자 이상 " + formval_max + "자 이하로 입력해주세요.", "error");
						}
					} else {
						if (formval_min) {
							if (formval_min > field.value.trim().length) {
								this.setStatus(field, formval_min + "자 이상 입력해주세요.", "error");
							}
						}
						if (formval_max) {
							if (formval_max < field.value.trim().length) {
								this.setStatus(field, formval_max + "자 이하로 입력해주세요.", "error");
							}
						}
					}
					let formcnt_min = fields[0].getAttribute("formcnt_min");
					let formcnt_max = fields[0].getAttribute("formcnt_max");

					let extractedNumber_Input = parseInt(field.value.trim().replace(/[^0-9.-]+/g, ""));

					let extractedNumber_Min
					let extractedNumber_Max
					if (formcnt_min) {
						extractedNumber_Min = parseInt(formcnt_min.replace(/[^0-9.-]+/g, ""));
					}
					if (formcnt_max) {
						extractedNumber_Max = parseInt(formcnt_max.replace(/[^0-9.-]+/g, ""));
					}

					if (formcnt_min && formcnt_max) {
						if (extractedNumber_Max < extractedNumber_Input || extractedNumber_Min > extractedNumber_Input) {
							this.setStatus(field, formcnt_min + " 이상 " + formcnt_max + " 이하로 입력해주세요.", "error");
						}
					} else {
						if (formcnt_min) {
							if (extractedNumber_Min > extractedNumber_Input) {
								this.setStatus(field, formcnt_min + " 이상 입력해주세요.", "error");
							}
						}
						if (formcnt_max) {
							if (extractedNumber_Max < extractedNumber_Input) {
								this.setStatus(field, formcnt_max + " 이하로 입력해주세요.", "error");
							}
						}
					}

				}

				if (field.type === "email") {
					const re = /\S+@\S+\.\S+/;
					if (re.test(field.value)) {
						this.setStatus(field, null, "success");
					} else {
						this.setStatus(field, "이메일 형식이 맞지 않습니다.", "error");
					}
				}

				if (field.id === "password_confirmation") {
					const passwordField = this.form.querySelector("#password");

					if (field.value.trim() == "") {
						this.setStatus(field, "비밀번호를 입력해주세요.", "error");
					} else if (field.value != passwordField.value) {
						this.setStatus(field, "비밀번호 두개가 일치하지 않습니다.", "error");
					} else {
						this.setStatus(field, null, "success");
					}
				}
			}
		});
	}

	validateFields_Checkbox(field, checkboxName, isnull = false) {
		const selectedCheckboxLength = document.querySelectorAll(`input[name="${checkboxName}"]:checked`).length;
		let formval_min = field.getAttribute("formval_min");
		let formval_max = field.getAttribute("formval_max");

		if (selectedCheckboxLength == 0 && !isnull) {
			this.setStatus(field, `${field.parentElement.parentElement.querySelector("label").innerText} 을/를 선택해주세요`, "error");
		} else {
			this.setStatus(field, null, "success");
		}

		if (formval_max && formval_min) {
			if (formval_max < selectedCheckboxLength || formval_min > selectedCheckboxLength) {
				this.setStatus(field, formval_min + "개 이상 " + formval_max + "개 이하로 선택해주세요.", "error");
			}
		} else {
			if (formval_min) {
				if (formval_min > selectedCheckboxLength) {
					this.setStatus(field, formval_min + "개 이상 선택해주세요.", "error");
				}
			}
			if (formval_max) {
				if (formval_max < selectedCheckboxLength) {
					this.setStatus(field, formval_max + "개 이하로 선택해주세요.", "error");
				}
			}
		}
	}

	validateFields_Selectbox(field, isnull = false) {
		if (field.value.trim() === "" && !isnull) {
			this.setStatus(field, `${field.previousElementSibling.previousElementSibling.innerText} 을/를 선택해주세요`, "error");
		} else {
			this.setStatus(field, null, "success");
		}
	}

	setStatus(field, message, status) {
		const successIcon = field.parentElement.querySelector(".iconSuccess") ? field.parentElement.querySelector(".iconSuccess") : field.parentElement.parentElement.querySelector(".iconSuccess");
		const errorIcon = field.parentElement.querySelector(".iconError") ? field.parentElement.querySelector(".iconError") : field.parentElement.parentElement.querySelector(".iconError");
		const errorMessage = field.parentElement.querySelector(".errorMessage") ?
			field.parentElement.querySelector(".errorMessage") :
			field.parentElement.parentElement.querySelector(".errorMessage");

		if (status === "success") {
			if (errorIcon) {
				errorIcon.classList.add("hidden");
			}
			if (errorMessage) {
				errorMessage.innerText = "";
			}
			if (successIcon) {
				successIcon.classList.remove("hidden");
			}
			field.classList.remove("input-error");
		}

		if (status === "error") {
			if (successIcon) {
				successIcon.classList.add("hidden");
			}
			errorMessage.innerText = message;
			errorIcon.classList.remove("hidden");
			field.classList.add("input-error");
		}
	}
}