Merge pull request #293 from MastersAcademy/6-functions_Rooosss

Added registration form validation
MastersAcademy · Nov 11, 2023 · a795da2 · a795da2
2 parents 96d590f + 6301b16
commit a795da2
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 6 deletions.
diff --git a/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/login.html b/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/login.html
@@ -37,21 +37,22 @@
                 <section class="login">
                     <div class="login__inner">
                         <h1 class="login__title">Login page</h1>
-                        <form class="login__form" action="success.html">
+                        <form class="login__form">
                             <label class="login__form-label" for="email">Email</label>
-                            <input class="login__form-input" type="email" id="email" placeholder="Enter your email address" required>
+                            <input id="email" class="login__form-input" type="email" placeholder="Enter your email address">
 
                             <label class="login__form-label" for="password">Password</label>
-                            <input class="login__form-input" type="password" id="password" placeholder="Enter your password" required>
+                            <input id="password" class="login__form-input" type="password" placeholder="Enter your password">
 
-                            <input class="login__form-checkbox" type="checkbox" id="check" required>
+                            <input id="check" class="login__form-checkbox" type="checkbox">
                             <label class="login__form-label_check" for="check">I’m not a robot</label>
-
-                            <input class="login__form-submit" type="submit" value="Login">
+                            <div id="errors-container" class="login__error"></div>
+                            <button id="submit-button" class="login__form-submit" type="button">Login</button>
                         </form>
                     </div>
                 </section>
             </div>
         </main>
+        <script src="./scripts/script.js"></script>
     </body>
 </html>
diff --git a/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/scripts/script.js b/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/scripts/script.js
@@ -0,0 +1,84 @@
+const EMAIL_INPUT_ID = 'email';
+const PASSWORD_INPUT_ID = 'password';
+const NOT_A_ROBOT_CHECKBOX_ID = 'check';
+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 deleteSpaces(str) {
+    return str.replace(/\s/g, '');
+}
+
+function validateForm() {
+    const email = deleteSpaces(getValueById(EMAIL_INPUT_ID));
+    const password = getValueById(PASSWORD_INPUT_ID);
+    const check = getValueById(NOT_A_ROBOT_CHECKBOX_ID);
+    deleteErrors();
+
+    if (!email) {
+        setErrors({ [EMAIL_INPUT_ID]: 'The email field must be filled' });
+    } else if (!isEmail(email)) {
+        setErrors({ [EMAIL_INPUT_ID]: 'Email is not valid' });
+    }
+
+    if (!password) {
+        setErrors({ [PASSWORD_INPUT_ID]: 'The password field must be filled' });
+    } else if (password.length < 8 || password.length > 12) {
+        setErrors({ [PASSWORD_INPUT_ID]: 'Password must be between 8 and 12 characters' });
+    }
+
+    if (!check) {
+        setErrors({ [NOT_A_ROBOT_CHECKBOX_ID]: 'Please check not a robot checkbox' });
+    }
+
+    if (isEmail(email) && password && check) {
+        navigateToResultPage();
+    }
+}
+
+submitButton.onclick = validateForm;
diff --git a/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/style.css b/homeworks/rostyslav.vyshemirskyi_Rooosss/PokemonProject/style.css
@@ -307,6 +307,18 @@ body {
   transform: translate(2px, 1px);
 }
 
+.login__error {
+  margin-bottom: 10px;
+  display: block;
+  width: 50%;
+  background-color: #EF4934;
+}
+
+.error {
+  padding: 5px;
+  color: #FFF;
+}
+
 /* Login success */
 
 .login__success-title {