[PRAC/cont] Add validation for "search-input"

Organiz msg output in case of incorrect data filling/entering.

Worth noting:
  - the upcoming correction of this logic.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-search.css

@@ -1,9 +1,9 @@
 .crm__search-data {
   display: flex;
-  align-items: center;
   row-gap: 20px;
   margin-bottom: 40px;
-  padding: 25px;
+  padding: 25px 25px 10px 25px;
+  min-height: 105px;
   background-color: var(--white);
   box-shadow: 0px 9.03px 27.09px 0px rgba(176, 190, 197, 0.32), 0px 3.386px 5.644px 0px rgba(176, 190, 197, 0.32);
 }
@@ -14,6 +14,7 @@
 }
 
 .crm__search-form-input-wrap {
+  padding-top: 4px;
   width: 100%;
   max-width: 580px;
 }
@@ -36,8 +37,10 @@
   .crm__search-data {
     flex-wrap: wrap;
     justify-content: center;
-    row-gap: 10px;
+    row-gap: 5px;
+    margin-bottom: 20px;
     padding: 10px;
+    min-height: auto;
   }
 
   .crm__search-logo-wrap {

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -36,6 +36,7 @@
   searchLogoImg.setAttribute('height', '50');
   searchLogoImg.setAttribute('alt', 'Логотип: Skillbus');
   searchForm.setAttribute('action', '#');
+  searchForm.setAttribute('novalidate', '');
   searchInput.setAttribute('type', 'text');
   searchInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
   searchInput.setAttribute('placeholder', 'Введите запрос');
@@ -48,12 +49,129 @@
   searchFormInputWrap.append(searchForm);
   crmSearch.append(searchLogoWrap, searchFormInputWrap);
 
-  // организация появления/скрытия поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
+  // ** организация появления/скрытия поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
   document
     .querySelector('.crm__search-logo-img')
     .addEventListener('click', () => {
       document
         .querySelector('.crm__search-data')
         .classList.toggle('show-search-input');
     });
+
+  // ** обновление валидационного сообщения (изменение состояния input(a))
+  function updateFormInputValidMsg(input) {
+    const parentNode = input.parentNode;
+    const invalidFeed = parentNode.querySelector('.invalid-feedback');
+
+    if (!invalidFeed) return; // если/вдруг такое сообщение не предусмотренно для input(а)
+
+    input.classList.remove('is-invalid');
+
+    if (input.placeholder) {
+      switch (input.placeholder) {
+        case 'Фамилия':
+          invalidFeed.textContent = 'Заполните поле "Фамилия"!';
+          break;
+        case 'Имя':
+          invalidFeed.textContent = 'Заполните поле "Имя"!';
+          break;
+        case 'Отчество':
+          invalidFeed.textContent = 'Заполните поле "Отчество"!';
+          break;
+        case 'Ф.И.О.':
+          invalidFeed.textContent = 'Введите Ф.И.О.!';
+          break;
+        case 'Дата рождения':
+          invalidFeed.textContent =
+            'Укажите дату рождения, в диапазоне: от 1900 года до "текущего"!';
+          break;
+        case 'Год начала обучения':
+          invalidFeed.textContent =
+            'Укажите год начала обучения, в диапазоне: от 2000 по "текущий"!';
+          break;
+        case 'Год окончания обучения':
+          invalidFeed.textContent =
+            'Укажите год окончания обучения, в диапазоне: от 2004 по "..."!';
+          break;
+        case 'Факультет':
+          invalidFeed.textContent = 'Определите факультет (не менее 3-х букв)!';
+          break;
+        default:
+          invalidFeed.textContent = 'Заполните поле!';
+          break;
+      }
+    }
+  }
+
+  // ** организация валидации для ввода данных/фильтрационного инпута (для формы без submit)
+  function searchFormInputValidation(input) {
+    if (input.type === 'number') {
+      // исключение ввода не цифр, через прослушку клавиатуры (ряд исключений)
+      input.addEventListener('keydown', (event) => {
+        const pressedKey = event.key;
+        const target = event.target;
+        const targetParentNode = target.parentNode;
+        const invalidFeed = targetParentNode.querySelector('.invalid-feedback');
+
+        if (event.ctrlKey || event.altKey || event.shiftKey) {
+          return;
+        }
+
+        if (
+          !pressedKey.match(/[0-9]/) &&
+          ![
+            'Tab',
+            'Backspace',
+            'Enter',
+            'Delete',
+            'ArrowUp',
+            'ArrowRight',
+            'ArrowDown',
+            'ArrowLeft',
+          ].includes(pressedKey)
+        ) {
+          target.classList.add('is-invalid');
+          invalidFeed.textContent = 'Некорректный ввод! Только цифры!';
+          event.preventDefault();
+        } else {
+          target.classList.remove('is-invalid');
+          updateFormInputValidMsg(target);
+        }
+      });
+    }
+
+    input.addEventListener('input', (event) => {
+      const target = event.target;
+      const targetParentNode = target.parentNode;
+      const invalidFeed = targetParentNode.querySelector('.invalid-feedback');
+
+      if (target.type === 'text') {
+        // только русские буквы и дефис (для двойных-фамилий), без цифр/символов и необоснованных пробелов
+        if (
+          /[^а-яА-ЯёЁ\s-]/.test(target.value) ||
+          /\s{2,}/.test(target.value) ||
+          /^\s|\s$/.test(target.value)
+        ) {
+          target.classList.add('is-invalid');
+          invalidFeed.textContent =
+            'Некорректный ввод! Измените раскладку клавиатуры и/или исключите цифры/знаки, пробелы!';
+        } else {
+          target.classList.remove('is-invalid');
+          updateFormInputValidMsg(target);
+        }
+      } else if (target.type === 'number') {
+        // ограничение по длине ввода
+        if (target.value.length > 4) {
+          target.classList.add('is-invalid');
+          invalidFeed.textContent = 'Некорректный ввод! Не более 4 цифр!';
+        } else {
+          target.classList.remove('is-invalid');
+          updateFormInputValidMsg(target);
+        }
+      }
+    });
+  }
+
+  const searchFormInput = document.querySelector('.crm__search-form input'); // получение search-инпута
+  searchFormInputValidation(searchFormInput);
 })();