JS метод Element.hasAttribute()

Порада:

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

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

Порада:

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

Порада:

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

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

Синтаксис

hasAttribute(name)

Параметри

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

Return

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

Переглядачі

Переглядач

Переглядач

Переглядач

Приклади

У цьому прикладі ми використовуємо метод hasAttribute('data-completed') для перевірки, чи елемент списку завдань має атрибут data-completed. Якщо атрибут присутній, ми отримуємо його значення за допомогою getAttribute('data-completed') і використовуємо його для встановлення класу completed для елемента, що відображає його як виконане завдання.

Користувач може натиснути на кнопку "Переключити виконані завдання", щоб змінити стан виконання завдань. Метод toggleCompleted() перебирає всі елементи списку, перевіряє наявність атрибута data-completed, змінює клас completed та значення атрибута data-completed відповідно до поточного стану завдання. Після цього рахується кількість виконаних завдань і виводиться відповідне повідомлення.

Ця демонстрація показує, як hasAttribute() може використовуватися для перевірки наявності атрибута, а отримане значення атрибута може бути використане для зміни стану елемента та відображення користувачеві. Користувач може взаємодіяти зі списком завдань, переглядаючи та змінюючи їх стан виконання.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYoBpZR">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо метод hasAttribute() для перевірки наявності атрибута data-product у елементів списку продуктів. Якщо атрибут є, ми отримуємо його значення і виводимо у модальному вікні. Це демонструє, як можна використовувати hasAttribute() для перевірки наявності певного атрибута перед виконанням додаткових дій.

<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>

У цьому прикладі ми використовуємо метод hasAttribute() для валідації форми реєстрації користувача. Ми перевіряємо наявність обов'язкових атрибутів required у полів форми перед відправленням даних. Також ми використовуємо hasAttribute('pattern') для перевірки, чи поле електронної пошти відповідає певному шаблону. Цей приклад демонструє, як hasAttribute() може бути використаний для перевірки атрибутів та валідації форм.

<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>

JS довідник

JavaScript

Наповнення JS розділу

JS метод Element.hasAttribute()

Синтаксис

Параметри

Return

Переглядачі

Приклади