test: check if markup works right

src/js/modules/login/_UI.mjs

@@ -3,7 +3,7 @@ const REGISTER_TEXT_CONTENT = 'Register';
 const renderMailFormItem = () => `
   <div class="form__item">
     <label for="#" class="form__label"> E-Mail: </label>
-    <input type="email" class="form__input" />
+    <input type="email" class="form__input email-input" required />
     <div class="error"></div>
   </div>
 `;

src/js/modules/login/_validation.mjs

+// ? Username must have at least one capital letter (it must be a first letter),
+// ? minimum 4 symbols, maximum 10 symbols, only letters and digits
+function validateUsername(username) {
+  const regExpUsername = /^[A-Z][A-Za-z0-9]{3,9}$/;
+  return regExpUsername.test(String(username));
+}
+
+function validateEmail(email) {
+  const regExpEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return regExpEmail.test(String(email));
+}
+
+// ? Checks that password has capital letter at the first position, after the first capital letter
+// ? at least 1 any letter or digit should follow, then the special must follow and then
+// ? at least one letter or digit. Minimum length is 4 symbols, max length is 8 symbols
+function validatePassword(password) {
+  const regExpPassword =
+    /^[A-Z][a-zA-Z0-9]{1,}[!@#$%^&*()_+|~=`{}[\]:";'<>?,./]{1}[a-zA-Z0-9]{1,}$/;
+  return regExpPassword.test(String(password));
+}
+
+export default function validateFields(
+  userNameElement = document.querySelector('.username-input'),
+  userEmailElement = document.querySelector('.email-input'),
+  userPasswordElement = document.querySelector('.password-input'),
+  required = document.querySelectorAll('[required]')
+) {
+  const userNameValue = userNameElement.value;
+  let userEmailValue = null;
+  const userPasswordValue = userPasswordElement.value;
+
+  const isEmptyField = [...required].some((field) => field.value === '');
+
+  if (isEmptyField) {
+    console.log('Fill in all empty fields! Validation Error!');
+    return;
+  }
+
+  if (!userNameElement.classList.contains('_error-validate')) {
+    if (!validateUsername(userNameValue)) {
+      console.log('Please enter a valid username!');
+      return;
+    }
+  }
+
+  if (userEmailElement) {
+    userEmailValue = userEmailElement.value;
+
+    if (!userNameElement.classList.contains('_error-validate')) {
+      if (!validateEmail(userEmailValue)) {
+        console.log('Please enter a valid e-mail!');
+        return;
+      }
+    }
+  }
+
+  if (!userPasswordElement.classList.contains('_error-validate')) {
+    if (!validatePassword(userPasswordValue)) {
+      console.log('Please enter a valid password!');
+      return;
+    }
+  }
+
+  if (
+    !isEmptyField &&
+    validateUsername(userNameValue) &&
+    validateEmail(userEmailValue) &&
+    validatePassword(userPasswordValue)
+  ) {
+    console.log('Everything is fine! Form will be submitted!');
+  }
+}

src/pages/login/index.html

@@ -57,23 +57,37 @@
             <!-- Logo column end -->
             <!-- Form column start -->
             <div class="login__form-col">
-              <form action="#" class="login__form">
+              <form action="#" class="login__form" novalidate>
                 <div class="form__title">Login</div>
                 <div class="form__subtitle">Welcome back.</div>
 
+                <div class="form__items">
                   <div class="form__item">
                     <label for="#" class="form__label"> Username: </label>
-                  <input type="text" class="form__input" />
+                    <input
+                      type="text"
+                      class="form__input username-input"
+                      minlength="4"
+                      maxlength="10"
+                      required
+                    />
                     <div class="error"></div>
                   </div>
 
                   <div class="form__item">
                     <label for="#" class="form__label"> Password: </label>
-                  <input type="password" class="form__input" />
+                    <input
+                      type="password"
+                      class="form__input password-input"
+                      minlength="4"
+                      maxlength="8"
+                      required
+                    />
                     <div class="error"></div>
                   </div>
+                </div>
 
-                <button class="form__btn">Login</button>
+                <button type="submit" class="form__btn">Login</button>
 
                 <div class="login__account">
                   Don’t have an account?

src/pages/login/script.mjs

 import './index.html';
 import './style.scss';
 import Router from '../../js/modules/login/Router.mjs';
+import validateFields from '../../js/modules/login/_validation.mjs';
+
+const enterForm = document.querySelector('.login__form');
 
 const loginSwitcher = document.querySelector('.login__account-join');
 
@@ -11,3 +14,8 @@ window.addEventListener('load', () => {
 loginSwitcher.addEventListener('click', (e) => {
   Router.handlePageState(e);
 });
+
+enterForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  validateFields();
+});

src/pages/login/style.scss

@@ -37,7 +37,6 @@
 
   &__form-col {
     flex: 0 1 50%;
-
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -48,7 +47,6 @@
     display: flex;
     flex-direction: column;
     min-width: 516px;
-    height: 600px;
     border-width: 3px;
     border-radius: 20px;
     padding: 30px 41px;
@@ -111,16 +109,22 @@
     position: relative;
   }
   &__pic {
-    width: 350px;
-    height: 350px;
+    // width: 350px;
+    // height: 350px;
+    width: 100%;
+    height: 75%;
   }
 
   &__anim {
     position: absolute;
-    width: 600px;
-    height: 800px;
-    top: -250px;
-    left: -120px;
+    // width: 600px;
+    // height: 800px;
+    // top: -250px;
+    // left: -120px;
+    width: 152%;
+    height: 87vh;
+    top: -26%;
+    left: -25%;
     background: $easter-purple;
     border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
     animation: anim 27s infinite;
@@ -144,11 +148,20 @@
     margin-bottom: 40px;
   }
 
+  &__items {
+    > * {
+      &:not(:last-child) {
+        margin-bottom: 15px;
+      }
+    }
+
+    margin-bottom: 50px;
+  }
+
   &__item {
     display: flex;
     flex-direction: column;
     text-align: left;
-    margin-bottom: 26px;
   }
 
   &__label {
@@ -177,7 +190,7 @@
     border-radius: 10px;
     background: #f9f2ff;
     color: $pinkish-purple;
-    margin-bottom: 58px;
+    margin-bottom: 25px;
     transition: 0.5s;
 
     &:hover {