homework #6, functions.

homeworks/sasha.demidenko_SashaDemi/GamesProject/login.html

@@ -22,29 +22,31 @@
         </header>
         <main class="form">
             <h1 class="form_h1">Login page</h1>
-            <form action="success.html" class="form_content">
+            <form class="form_content">
                 <p class="form_p">
-                    <label for="email" class="form_email">Email</label>
+                    <label for="email-input" class="form_email">Email</label>
                     <br >
-                    <input type="email" id="email" name="email" required="required"
+                    <input id="email-input" name="email" required="required"
                         placeholder="Enter your email address" class="form_email--input">
                 </p>
                 <p class="form_p">
-                    <label for="pwd" class="form_pass">Password</label>
+                    <label for="password-input" class="form_pass">Password</label>
                     <br >
-                    <input type="password" id="pwd" name="pwd" required="required"
+                    <input id="password-input" name="pwd" required="required"
                         placeholder="Enter your password" class="form_pass--input">
                 </p>
-                <label for="robot" class="checkbox-main">
-                    <input type="checkbox" id="robot" name="robot"
+                <label for="not-a-robot" class="checkbox-main">
+                    <input type="checkbox" id="not-a-robot" name="robot"
                         value="check" class="form_checkbox" required="required">
                     <span class="custom-checkbox"></span>
                     I'm not a robot
                 </label>
+                <div id="errors-container"></div>
                 <p>
-                    <button type="submit" id="button" class="submit_button">Login</button>
+                    <button type="button" id="submit-button" class="submit_button">Login</button>
                 </p>
             </form>
         </main>
+        <script src="scripts/script.js"></script>
     </body>
 </html>

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 protected].';
+    }
+
+    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;