JS метод Element.hasAttribute()

На даний момент опис відсутній.

Порада

Використовуйте hasAttribute() для перевірки стану елемента або його властивостей. Наприклад, ви можете перевірити, чи елемент має атрибут disabled або readonly, перш ніж дозволити користувачеві взаємодіяти з ним.

автор: Bond правити

Порада

Метод hasAttribute() може бути корисним для валідації даних форми перед відправленням. Наприклад, ви можете перевірити, чи всі обов'язкові поля форми мають атрибут required, щоб забезпечити, що користувач заповнив їх.

const formFields = document.querySelectorAll('input, textarea, select');
formFields.forEach(field => {
  if (field.hasAttribute('required') && !field.value) {
    // Показати повідомлення про помилку
  }
});

автор: Bond правити

Порада

Комбінуйте hasAttribute() з іншими методами роботи з атрибутами, такими як getAttribute() та setAttribute(), для створення більш складних функцій управління атрибутами елементів. Наприклад, ви можете створити функцію, яка видаляє атрибут, якщо він присутній, або встановлює його, якщо він відсутній.

function toggleAttribute(element, attribute, value) {
  if (element.hasAttribute(attribute)) {
    element.removeAttribute(attribute);
  } else {
    element.setAttribute(attribute, value);
  }
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

hasAttribute(name)

Параметри

name

Рядок, що представляє ім'я атрибута, наявність якого потрібно перевірити в елементі.

автор: Bond

правити

Повернення

boolean

Повертає логічне значення типу boolean. True, якщо вказаний атрибут присутній в елементі, інакше - false. Це значення можна використовувати для перевірки наявності атрибута перед виконанням певних дій або для прийняття рішень на основі стану елемента.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач

Підтримка: мобільні переглядачі

Переглядач

Підтримка: серверні переглядачі

Переглядач

Приклади

+ запропонувати свій приклад у пісочниці

<ul>
  <li data-product="Футболка">Футболка</li>
  <li data-product="Штани">Штани</li>
  <li>Шапка</li>
</ul>
<div id="modal" style="display: none;">
  <span id="modalText"></span>
</div>

<script>
const items = document.querySelectorAll('li');

items.forEach(item => {
  item.addEventListener('click', () => {
    if (item.hasAttribute('data-product')) { // Перевірка наявності атрибута
      const productName = item.getAttribute('data-product');
      const modal = document.getElementById('modal');
      const modalText = document.getElementById('modalText');
      modalText.textContent = `Ви обрали: ${productName}`;
      modal.style.display = 'block';
    }
  });
});
</script>

<form id="registerForm">
  <label>
    Ім'я:
    <input type="text" name="name" required>
  </label>
  <label>
    Email:
    <input type="email" name="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
  </label>
  <label>
    Пароль:
    <input type="password" name="password" required minlength="8">
  </label>
  <button type="submit">Зареєструватись</button>
</form>
<div id="errorMessage" style="display: none; color: red;"></div>

<script>
const form = document.getElementById('registerForm');
const errorMessage = document.getElementById('errorMessage');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Зупиняємо відправлення форми за замовчуванням

  const inputs = form.querySelectorAll('input');
  let isValid = true;

  inputs.forEach(input => {
    if (input.hasAttribute('required') && input.value.trim() === '') { // Перевірка обов'язкових полів
      isValid = false;
    }

    if (input.hasAttribute('pattern')) { // Перевірка відповідності шаблону для email
      const pattern = new RegExp(input.getAttribute('pattern'));
      if (!pattern.test(input.value)) {
        isValid = false;
      }
    }
  });

  if (isValid) {
    // Відправлення форми на сервер
    form.submit();
  } else {
    errorMessage.textContent = 'Будь ласка, заповніть всі обов\'язкові поля коректно.';
    errorMessage.style.display = 'block';
  }
});
</script>