"use strict";
const modal = document.getElementById("js-modal");
const modalWrapper = document.getElementById("js-modalWrapper");
const checkbox = document.getElementById("js-checkbox");
const closeButton = document.getElementById("js-close");
const form = document.getElementById("js-form");
const term = document.getElementById("js-term");
const submit = document.getElementById("js-submit");
const userNameForm = document.getElementById("js-userName");
const emailForm = document.getElementById("js-email");
const passwordForm = document.getElementById("js-password");
const insertErrorMessageElement = (id, element, formElement) => {
element.id = id;
const formParentElement = formElement.parentNode;
formParentElement.insertBefore(element, formElement.nextSibling);
};
const initErrorMessageElementShow = ({ userName, email, password }) => {
Object.values(errorMessageElementIdNames).forEach(
(errorMessageElementIdName) => {
const errorElement = document.createElement("p");
errorElement.classList.add("errorMessage");
switch (errorMessageElementIdName) {
case userName:
insertErrorMessageElement(userName, errorElement, userNameForm);
break;
case email:
insertErrorMessageElement(email, errorElement, emailForm);
break;
case password:
insertErrorMessageElement(password, errorElement, passwordForm);
break;
default:
break;
}
}
);
};
const errorMessageElementIdNames = {
userName: "js-userNameError",
email: "js-emailError",
password: "js-passwordError"
};
initErrorMessageElementShow(errorMessageElementIdNames);
const userNameErrorElement = document.getElementById(
errorMessageElementIdNames.userName
);
const emailErrorElement = document.getElementById(
errorMessageElementIdNames.email
);
const passwordErrorElement = document.getElementById(
errorMessageElementIdNames.password
);
let validFlags = {
userName: false,
email: false,
password: false,
useTerm: false
};
const changeDisabledSubmit = () => {
if (Object.values(validFlags).includes(false)) {
submit.disabled = true;
checkbox.disabled = true;
} else {
submit.disabled = false;
checkbox.disabled = false;
}
};
////////////////////////////////////////////////////////////////////////////////////////////////////////////
let validateTerms = {
userNameMaxCount: 15,
email: {
regex: /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/
},
password: {
regex: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/
}
};
const errorMessages = {
userName: "ユーザー名は15文字以下にしてください。",
email: "メールアドレスの形式になっていません。",
password: "8文字以上の大小の英数字を交ぜたものにしてください。"
};
const isValidUserName = (inputValue) =>
inputValue.length < validateTerms.userNameMaxCount;
userNameForm.addEventListener("blur", (e) => {
const inputValue = [...e.target.value];
updateValidation(
userNameErrorElement,
"userName",
isValidUserName(inputValue)
);
changeDisabledSubmit();
});
const updateValidation = (elem, key, isValid) => {
if (isValid) {
validFlags[key] = true;
elem.textContent = "";
} else {
validFlags[key] = false;
elem.textContent = errorMessages[key];
}
};
const isValid = (key, value) => validateTerms[key].regex.test(value);
emailForm.addEventListener("blur", (e) => {
updateValidation(
emailErrorElement,
"email",
isValid("email", e.target.value)
);
changeDisabledSubmit();
});
passwordForm.addEventListener("blur", (e) => {
updateValidation(
passwordErrorElement,
"password",
isValid("password", e.target.value)
);
changeDisabledSubmit();
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////
modalWrapper.addEventListener("scroll", (e) => {
if (scrollHeight - (clientHeight + e.target.scrollTop) === 0) {
checkbox.disabled = false;
checkbox.checked = true;
validFlags.useTerm = true;
changeDisabledSubmit();
}
});
let clientHeight = modalWrapper.clientHeight;
let scrollHeight = modalWrapper.scrollHeight;
window.onresize = () => {
clientHeight = modalWrapper.clientHeight;
scrollHeight = modalWrapper.scrollHeight;
};
term.addEventListener("click", () => {
modal.classList.add("show");
});
closeButton.addEventListener("click", () => {
modal.classList.remove("show");
});
checkbox.addEventListener("click", () => {
if (checkbox.checked) {
validFlags.useTerm = true;
} else {
validFlags.useTerm = false;
}
changeDisabledSubmit();
});
form.addEventListener("submit", (e) => {
if (checkbox.checked) {
e.preventDefault();
location.href = "./register-done.html";
}
});
to
"use strict";
const modal = document.getElementById("js-modal");
const modalWrapper = document.getElementById("js-modalWrapper");
const checkbox = document.getElementById("js-checkbox");
const closeButton = document.getElementById("js-close");
const form = document.getElementById("js-form");
const term = document.getElementById("js-term");
const submit = document.getElementById("js-submit");
const userNameForm = document.getElementById("js-userName");
const emailForm = document.getElementById("js-email");
const passwordForm = document.getElementById("js-password");
const insertErrorMessageElement = (id, element, formElement) => {
element.id = id;
const formParentElement = formElement.parentNode;
formParentElement.insertBefore(element, formElement.nextSibling);
};
const initErrorMessageElementShow = ({ userName, email, password }) => {
Object.values(errorMessageElementIdNames).forEach(
(errorMessageElementIdName) => {
const errorElement = document.createElement("p");
errorElement.classList.add("errorMessage");
switch (errorMessageElementIdName) {
case userName:
insertErrorMessageElement(userName, errorElement, userNameForm);
break;
case email:
insertErrorMessageElement(email, errorElement, emailForm);
break;
case password:
insertErrorMessageElement(password, errorElement, passwordForm);
break;
default:
break;
}
}
);
};
const errorMessageElementIdNames = {
userName: "js-userNameError",
email: "js-emailError",
password: "js-passwordError"
};
initErrorMessageElementShow(errorMessageElementIdNames);
const userNameErrorElement = document.getElementById(
errorMessageElementIdNames.userName
);
const emailErrorElement = document.getElementById(
errorMessageElementIdNames.email
);
const passwordErrorElement = document.getElementById(
errorMessageElementIdNames.password
);
let validFlags = {
userName: false,
email: false,
password: false,
useTerm: false
};
const changeDisabledSubmit = () => {
if (Object.values(validFlags).includes(false)) {
submit.disabled = true;
checkbox.disabled = true;
} else {
submit.disabled = false;
checkbox.disabled = false;
}
};
////////////////////////////////////////////////////////////////////////////////////////////////////////////
let validateTerms = {
userNameMaxCount: 15,
email: {
regex: /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/
},
password: {
regex: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/
}
};
const errorMessages = {
userName: "ユーザー名は15文字以下にしてください。",
email: "メールアドレスの形式になっていません。",
password: "8文字以上の大小の英数字を交ぜたものにしてください。"
};
const isValidUserName = (inputValue) =>
inputValue.length < validateTerms.userNameMaxCount;
userNameForm.addEventListener("blur", (e) => {
const inputValue = [...e.target.value];
const isValid = isValidUserName(inputValue);
const key = "userName";
updateValidation(key, isValid);
updateTextContent(key, isValid, userNameErrorElement);
changeDisabledSubmit();
});
const updateTextContent = (key, isValid, elem) => {
elem.textContent = isValid ? "" : errorMessages[key];
};
const updateValidation = (key, isValid) => {
validFlags[key] = isValid;
};
const isValid = (key, value) => validateTerms[key].regex.test(value);
emailForm.addEventListener("blur", (e) => {
const key = "email";
const isValidEmail = isValid(key, e.target.value);
updateValidation(key, isValidEmail);
updateTextContent(key, isValidEmail, emailErrorElement);
changeDisabledSubmit();
});
passwordForm.addEventListener("blur", (e) => {
const key = "password";
const isValidPassword = isValid(key, e.target.value);
updateValidation(key, isValidPassword);
updateTextContent(key, isValidPassword, passwordErrorElement);
changeDisabledSubmit();
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////
modalWrapper.addEventListener("scroll", (e) => {
if (scrollHeight - (clientHeight + e.target.scrollTop) === 0) {
checkbox.disabled = false;
checkbox.checked = true;
validFlags.useTerm = true;
changeDisabledSubmit();
}
});
let clientHeight = modalWrapper.clientHeight;
let scrollHeight = modalWrapper.scrollHeight;
window.onresize = () => {
clientHeight = modalWrapper.clientHeight;
scrollHeight = modalWrapper.scrollHeight;
};
term.addEventListener("click", () => {
modal.classList.add("show");
});
closeButton.addEventListener("click", () => {
modal.classList.remove("show");
});
checkbox.addEventListener("click", () => {
if (checkbox.checked) {
validFlags.useTerm = true;
} else {
validFlags.useTerm = false;
}
changeDisabledSubmit();
});
form.addEventListener("submit", (e) => {
if (checkbox.checked) {
e.preventDefault();
location.href = "./register-done.html";
}
});