diff --git a/homeworks/sasha.demidenko_SashaDemi/GamesProject/login.html b/homeworks/sasha.demidenko_SashaDemi/GamesProject/login.html index 721d23c5..ddeb72af 100644 --- a/homeworks/sasha.demidenko_SashaDemi/GamesProject/login.html +++ b/homeworks/sasha.demidenko_SashaDemi/GamesProject/login.html @@ -22,29 +22,31 @@

Login page

-
+

- +
-

- +
-

- +

- +

+ diff --git a/homeworks/sasha.demidenko_SashaDemi/GamesProject/scripts/script.js b/homeworks/sasha.demidenko_SashaDemi/GamesProject/scripts/script.js new file mode 100644 index 00000000..b85419f5 --- /dev/null +++ b/homeworks/sasha.demidenko_SashaDemi/GamesProject/scripts/script.js @@ -0,0 +1,79 @@ +const EMAIL_INPUT_ID = 'email-input'; +const PASSWORD_INPUT_ID = 'password-input'; +const NOT_A_ROBOT_CHECKBOX_ID = 'not-a-robot'; +const SUBMIT_BUTTON_ID = 'submit-button'; +const ERRORS_CONTAINER_ID = 'errors-container'; +const RESULT_PAGE_PATH = './success.html'; + +const submitButton = document.getElementById(SUBMIT_BUTTON_ID); + +/** + * Return input value by id. + * @param {string} elementId + * @return {string|boolean} input value + */ +function getValueById(elementId) { + const element = document.getElementById(elementId); + const type = element.getAttribute('type'); + return type === 'checkbox' ? element.checked : element.value; +} + +/** + * Add errors to errors container. + * @param {Object} inputData in format like: { [input_id]: error_text, ... } + */ +function setErrors(inputData) { + const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} + +/** + * Delete all errors from errors container. + */ +function deleteErrors() { + const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); + errorContainerElement.replaceChildren(); +} + +/** + * Goes to the page with the result. + */ +function navigateToResultPage() { + window.location.href = RESULT_PAGE_PATH; +} + +function isEmail(email) { + return /\S+@\S+\.\S+/.test(email); +} + +function validateForm() { + const email = getValueById(EMAIL_INPUT_ID).replace(/\s+/g, ''); + const password = getValueById(PASSWORD_INPUT_ID); + const checkId = getValueById(NOT_A_ROBOT_CHECKBOX_ID); + const error = {}; + + if (!isEmail(email)) { + error[EMAIL_INPUT_ID] = 'Email має бути в форматі email@localDomen.domen.'; + } + + if (password.length < 8 || password.length > 12) { + error[PASSWORD_INPUT_ID] = 'Password має бути від 8 до 12 будь-яких символів'; + } + + if (!checkId) { + error[NOT_A_ROBOT_CHECKBOX_ID] = 'Чекбокс має бути чекнутим'; + } + + if (Object.keys(error).length > 0) { + deleteErrors(); + return setErrors(error); + } + return navigateToResultPage(); +} + +submitButton.onclick = validateForm;