doka-guide · TatianaFokina · Mar 5, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <title>Мгновенная валидация полей — Валидация формы — Дока</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" >
+    <style>
+          /* общие стили */
+        *,
+        *::before,
+        *::after {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        html {
+          color-scheme: dark;
+        }
+
+        html, body {
+          height: 100%;
+        }
+
+        body {
+          display: grid;
+          justify-content: center;
+          align-items: center;
+          padding: 50px;
+          background-color: #18191C;
+          color: #FFFFFF;
+          font-family: "Roboto", sans-serif;
+          font-size: 18px;
+          line-height: 1.4;
+          font-weight: 400;
+        }
+
+        .form {
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+        }
+
+        .form__label {
+          font-weight: 500;
+          font-size: 24px;
+        }
+
+        .form__field {
+          display: grid;
+          grid-template-columns: 200px 300px;
+          grid-template-rows: auto calc(14px * 2.2);
+          align-items: center;
+        }
+
+        .form__type-input {
+          width: 100%;
+          border: 1px solid #FFFFFF;
+          border-radius: 6px;
+          margin-block-end: 5px;
+          padding: 10px 15px;
+          background-color: transparent;
+          color: #FFFFFF;
+          font-size: 18px;
+          font-weight: 300;
+          font-family: inherit;
+          -webkit-appearance: none;
+          appearance: none;
+        }
+
+        .form__type-input:focus {
+          border-color: #C56FFF;
+          outline: none;
+        }
+
+        .form__type-input-error {
+          border: 1px solid #FF8630;
+          background-color: rgba(255, 134, 48, 0.1);
+        }
+
+        .form__error {
+          display: none;
+          grid-column: 2/3;
+          align-self: self-start;
+          grid-row-end: span 2;
+          color: #FF8630;
+          inline-size: 300px;
+          font-size: 14px;
+          line-height: 1.1;
+        }
+
+        .form__checkbox-label .form__error {
+          grid-column: 1/3;
+        }
+
+        .form__error-active {
+          display: block;
+        }
+
+        .form__checkbox-label {
+          position: relative;
+          display: grid;
+          grid-template-columns: 24px auto;
+          grid-template-rows: 1fr 1fr;
+          gap: 0 15px;
+          width: 300px;
+          margin-inline-start: auto;
+          cursor: pointer;
+        }
+
+        .form__type-checkbox {
+          width: 24px;
+          height: 24px;
+          opacity: 0;
+          padding: 0;
+        }
+
+        .form__type-checkbox + .form__type-checkbox-title::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 24px;
+          height: 24px;
+          border: 1px solid #FFFFFF;
+          border-radius: 6px;
+        }
+
+        .form__type-checkbox:focus + .form__type-checkbox-title::before {
+          border-color: #C56FFF;
+        }
+
+        .form__type-checkbox:checked + .form__type-checkbox-title::after {
+          content: '';
+          position: absolute;
+          left: 5px;
+          top: 5px;
+          width: 14px;
+          height: 14px;
+          border-radius: 3px;
+          background-color: #C56FFF;
+        }
+
+        .button {
+          inline-size: 300px;
+          border: 2px solid transparent;
+          margin-inline-start: auto;
+          padding: 10px 15px;
+          background-color: #C56FFF;
+          border-radius: 6px;
+          color: #000000;
+          font-size: 18px;
+          font-weight: 300;
+          font-family: inherit;
+          cursor: pointer;
+          transition: background-color 0.2s linear;
+        }
+
+        .button:hover {
+          border: 2px solid #FFFFFF;
+          background-color: #FFFFFF;
+        }
+
+        .button:focus {
+          outline: none;
+          border: 2px solid #FFFFFF;
+        }
+
+        .button-inactive {
+          cursor: default;
+          background-color: rgb(211, 211, 211, 0.2);
+        }
+
+        .button-inactive:hover {
+          background-color: rgb(211, 211, 211, 0.2);
+          border: 2px solid transparent;
+        }
+
+        @media (max-width: 768px) {
+          body {
+            padding: 30px;
+          }
+
+          .form__field {
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto calc(14px * 2.2);
+          }
+
+          .form__label {
+            margin-block-end: 10px;
+          }
+
+          .form__error {
+            grid-column: 1;
+          }
+        }
+    </style>
+  </head>
+    <body>
+    <form class="form" name="form" novalidate>
+      <label class="form__field">
+        <span class="form__label">Имя:</span>
+        <input
+          type="text"
+          id="input__name"
+          class="form__type-input"
+          placeholder="Иван"
+          minlength="2"
+          maxlength="40"
+          pattern="^[a-zA-Zа-яА-ЯЁё\s\-]+$"
+          data-error-message="Разрешены символы латиницы, кириллицы, знаки дефиса и пробелы."
+          required
+        />
+        <span class="form__error input__name-error"></span>
+      </label>
+      <label class="form__field">
+        <span class="form__label">Фамилия:</span>
+        <input
+          type="text"
+          id="input__surname"
+          class="form__type-input"
+          placeholder="Васильевич"
+          minlength="2"
+          maxlength="40"
+          pattern="^[a-zA-Zа-яА-ЯЁё\s\-]+$"
+          data-error-message="Разрешены символы латиницы, кириллицы, знаки дефиса и пробелы."
+          required
+        />
+        <span class="form__error input__surname-error"></span>
+      </label>
+      <label class="form__field">
+        <span class="form__label">E-mail:</span>
+        <input
+          type="email"
+          id="input__e-mail"
+          class="form__type-input"
+          placeholder="menyaet.professiyu@ivan.com"
+          required
+        />
+        <span class="form__error input__e-mail-error"></span>
+      </label>
+      <label class="form__field">
+        <span class="form__label">Возраст:</span>
+        <input
+          type="number"
+          id="input__age"
+          class="form__type-input"
+          placeholder="40"
+          min="18"
+          max="100"
+          required
+        />
+        <span class="form__error input__age-error"></span>
+      </label>
+      <label class="form__checkbox-label">
+        <input
+          type="checkbox"
+          id="input__checkbox"
+          class="form__type-input form__type-checkbox"
+          checked
+          required
+        />
+        <span class="form__type-checkbox-title">Я согласен быть царём</span>
+        <span class="form__error input__checkbox-error"></span>
+      </label>
+      <button type="submit" class="button">Отправить</button>
+    </form>
+  </body>
+  <script>
+    const form = document.querySelector(".form");
+    const inputList = Array.from(document.querySelectorAll(".form__type-input"));
+    const buttonElement = form.querySelector(".button");
+
+    startValidation();
+
+    function startValidation() {
+      toggleButton();
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+      });
+      inputList.forEach((inputElement) => {
+        console.dir(inputElement);
+
+        inputElement.addEventListener("input", () => {
+          checkInputValidity(inputElement);
+          toggleButton();
+        });
+      });
+    }
+
+    function checkInputValidity(inputElement) {
+      if (inputElement.validity.patternMismatch) {
+        inputElement.setCustomValidity(inputElement.dataset.errorMessage);
+      } else {
+        inputElement.setCustomValidity(checkLengthMismatch(inputElement));
+      }
+
+      if (!inputElement.validity.valid) {
+        toggleErrorSpan(inputElement, inputElement.validationMessage);
+      } else {
+        toggleErrorSpan(inputElement);
+      }
+    }
+
+    function checkLengthMismatch(inputElement) {
+      if (inputElement.type !== 'text') {
+        return ""
+      }
+      const valueLength = inputElement.value.trim().length;
+      if (valueLength < inputElement.minLength) {
+        return `Минимальное количество символов: ${inputElement.minLength}`
+      }
+      return ""
+    }
+
+    function hasInvalidInput() {
+      return inputList.some((inputElement) => {
+        return !inputElement.validity.valid;
+      });
+    }
+
+    function toggleErrorSpan(inputElement, errorMessage) {
+      const errorElement = document.querySelector(`.${inputElement.id}-error`);
+      if (errorMessage) {
+        inputElement.classList.add("form__type-input-error");
+        errorElement.textContent = errorMessage;
+        errorElement.classList.add("form__error-active");
+      } else {
+        inputElement.classList.remove("form__type-input-error");
+        errorElement.textContent = "";
+        errorElement.classList.remove("form__error-active");
+      }
+    }
+
+    function toggleButton() {
+      if (hasInvalidInput()) {
+        buttonElement.classList.add("button-inactive");
+        buttonElement.setAttribute("disabled", "");
+      } else {
+        buttonElement.classList.remove("button-inactive");
+        buttonElement.removeAttribute("disabled");
+      }
+    }
+  </script>
+</html>