gistfile1.md

"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";
  }
});