0

Мне нужно чтобы при пустом input, вложенном в fieldset, fieldset менял цвет своего border при отправки формы. Как это можно реализовать?

const form = document.querySelectorAll('.form');
const formInputs = document.querySelectorAll('.input')


formInputs.forEach(
  addEventListener('click', (e) => {
    e.previousElementSibling.classList.add('select');
  }),
);
.select {
  color: white;
}
<form class="form">
  <fieldset class="field">
    <legend>Text</legend>
    <input type="text" class='input' />
  </fieldset>
</form>

1 ответ 1

0

чтобы при пустом input, вложенном в fieldset, fieldset менял цвет своего border при отправки формы. Как это можно реализовать?

Например так...

const form = document.querySelectorAll('.form');
const field = document.querySelectorAll('.field');
const input = document.querySelectorAll('.input')

form.forEach(o => {
  o.addEventListener('submit', (e) => {
    e.preventDefault();
    input.forEach(function(e) {
      if (e.value === '') {
        e.parentNode.classList.add('error');
      }
    });
  });
});
.error {
  border: 1px solid red;
}
.input:focus + legend {
    color: red;
}
<form class="form">
  <fieldset class="field">
    <input type="text" class='input' />
    <legend>Text</legend>
  </fieldset>
  <button>Отправить</button>
</form>

7
  • Спасибо большое, а не подскажешь если в этом fieldset есть еще один элемент помимо input, как при клике на input к этому элементу добавить класс?
    – user524692
    10 янв в 14:42
  • @user524692, так ты можешь отредактировать свой вопрос... Покажи в нем что за элемент... На пальца не особо можно объяснить.
    – ksa
    10 янв в 15:44
  • Отредактировал, мне нужно чтобы при клике на input, legend менял свой цвет.
    – user524692
    10 янв в 15:54
  • @user524692, что потом? legend так и будет потом оставаться таким цветом?
    – ksa
    10 янв в 16:28
  • пока input в фокусе, после фокуса возвращается назад
    – user524692
    10 янв в 16:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.