Измените необходимый стиль элемента, если он пуст

Question

У меня есть несколько форм, в которых я хочу изменить цвет фона + цвет границы поля ввода всякий раз, когда обязательное поле не заполняется. Моя проблема в том, что я знаю, как сделать это вручную для каждого элемента с его идентификатором.

Мне нужно автоматически выбрать все элементы с html required, и если они пусты, изменить их стиль .

Теперь это мой код:

function showHideUserpanel() {
    var nbform = document.getElementById("userpanel");
    var emailcheckvar = document.getElementById("emailcheck");
    var voornaamcheckvar = document.getElementById("voornaamcheck");
    var voorwaardencheckvar = document.getElementById("voorwaardencheck");
    var aanmelding_succesvol = document.getElementById("bedankt-melding");

    if (emailcheckvar.value !== '' && voornaamcheckvar.value !== '' && voorwaardencheckvar.checked == true) {
        nbform.style.display = 'none';
        aanmelding_succesvol.style.display = 'block';
    } else {
        nbform.style.display = 'block';

        if (emailcheckvar.value == '') {
            emailcheckvar.style.backgroundColor = '#FF555526';
            emailcheckvar.style.borderColor = '#FF5555';
        }

        if (voornaamcheckvar.value == '') {
            vaarnaamcheckvar.style.backgroundColor = '#FF555526';
            voornaamcheckvar.style.borderColor = '#FF5555';
        }
    }
} 

Где переменная nbform - моя форма, а aanmelding_succesvol - мое сообщение об успешном завершении. У моей формы ID userpanel. Как видите, я могу изменить стиль для каждого элемента. Однако у меня есть несколько страниц с несколькими формами, все с разными идентификаторами. Поэтому я бы не предпочел создавать правило для 50 различных элементов.

Кто-нибудь знает, как это сделать? (jquery если проще реализовать, также возможно)

РЕДАКТИРОВАТЬ: я хочу, чтобы это происходило только при нажатии кнопки отправки формы, поэтому моя кнопка выглядит так:

<input type="submit" value="inschrijven" onclick="showHideUserpanel()"/>

Тогда, если поле пустое, стиль нужно изменить.

Answer 1

querySelectorAll будет итеративно выбирать ВСЕ элементы, имеющие требуемый класс. тогда вы можете l oop через все из них и применить свои изменения.

const elements = document.querySelectorAll('.required');
elements.forEach(element => {
   if (element.value === "") {
     element.style.display = '#FF555526';
     element.style.borderColor = '#FF5555';
   } else {
     ...
   }
});

Answer 2

Вы можете использовать CSS следующим образом:

input[value='']:required{
  border: 1px solid red;
}

Он должен соответствовать требуемым входам с атрибутом значения, являющимся пустой строкой.

Вероятно, вам следует сделать селектор немного более конкретным c хотя, если вы не хотите, чтобы это действовало при каждом вводе.

Изменить: На самом деле, вышеупомянутый метод, кажется, сохраняет красную границу после того, как вы вводите значение.

Другой подход заключается в использовании селектора «: placeholder-shown».

input:placeholder-shown:required{
     border: 1px solid red;
}

Примечание: это работает только в том случае, если у вас действительно установлены заполнители для ваших входных данных.

Также, если вы только хотите, чтобы это произошло после того, как форма была отправлена, вы можете добавить класс к форме (или некоторую оболочку вокруг всех полей), например, "submit-form", а затем указать селектор немного дальше:

.submitted-form input:placeholder-shown:required{
  border: 1px solid red;
}

Answer 3

Посмотрите на это

jQuery

$(function() {
  $("#myForm [required]").each(function() {
    $(this).on("input change blur", function() {
      $(this).toggleClass("invalid", this.value === "")
    })
  })
})

.invalid {
  background-color: yellow;
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  Voornaam: <input type="text" name="naam" value="" required /> Email: <input type="email" name="email" value="" required />
</form>

Ваниль

const check = e => {
  const tgt = e.target;
  tgt.classList.toggle("invalid", tgt.value === "")
};
window.addEventListener("load", function() {
  [...document.querySelectorAll("#myForm [required]")].forEach(elem => {
    elem.addEventListener("input", check);
    elem.addEventListener("change", check);
    elem.addEventListener("blur", check);
  })
})

.invalid {
  background-color: yellow;
  border-color: red;
}

<form id="myForm">
  Voornaam: <input type="text" name="naam" value="" required /> Email: <input type="email" name="email" value="" required />
</form>

Answer 4

Что-то вроде этого может сработать (я предполагаю, что jQuery существует из-за тега).

$('[required]').on('change', function(){
    if(typeof this.checked !== 'undefined' && !this.checked) {
        // required checkbox is not checked, set the style here
    }
    else if(!this.value) {
        // required text field is not filled, set the style here
    }
})

Если вы не используете здесь jQuery, [].slice.call(document.querySelectorAll('[required]')) дает вам массив HTML элементы для использования addEventListener на.