Каждый элемент создает один элемент после щелчка (предупреждение об ошибке)

Question

Итак, для формы я хотел бы создать сообщение об ошибке после каждого недействительного элемента при нажатии кнопки отправки.

Я почти все понял, за исключением того, что он добавляет диапазон дважды после элемент (потому что два элемента недопустимы). Мне нужно добавить его один раз к обоим недопустимым элементам.

Итак, мой JS / jquery (да, я знаю, я его смешал: p):

function checkrequired() {
 var nbform = document.getElementById("userpanel");
 var elements = document.querySelectorAll('[required]');
 elements.forEach(element => {
  if (element.value === "") {
   nbform.classList.add('submitted-form-invalid');
   $('.show-error').after("<span class='col-sm-12' style='color:red;'> Name is required.</span>");
  } else {
   return true;
  }
});

Как это выглядит:

Я также знаю, что он добавляет его дважды, а не один раз, потому что он добавляет его для каждого элемента. Но я не знаю, как это превзойти. Кто-нибудь?

EDIT:

Я придумал следующий Javascript, эта идея - все, что мне нужно. Это не должно быть действительно сложно:

function checkrequired() {
 var el = document.createElement("div");
 el.setAttribute('class', 'error-message');
 el.innerHTML = "Dit veld is verplicht";
 var x = document.querySelectorAll('.show-error');
  for (var i = 0; i < x.length; i++) {
   x[i].appendChild(el);
  }
 }

Единственная проблема теперь в том, что он только добавляет дочерний элемент к div sconds с классом "error-message". Не оба.

Answer 1

$('.show-error') возвращает массив элементов. Для всех этих элементов вы добавляете диапазон после проверки недействительности. Я думаю, что простой js дает вам больше контроля здесь.

Итак, вот пример фрагмента на обычном языке js.

Возможно, этот jsFiddle тоже полезен. И помните: проверка в браузере не сделает проверку на стороне сервера ненужной.

document.addEventListener("click", checkRequired);

const setError = (elem, remove) => {
  const span = document.createElement("span");
  span.classList.add("foutmelding");
  span.appendChild(document.createTextNode(` vul svp ${elem.getAttribute("placeholder")} in`));
  elem.insertAdjacentElement("afterEnd", span);
};

function checkRequired(evt) {
  if (evt.target.id === "check") {
    document.querySelectorAll(".foutmelding")
      .forEach(el => el.parentNode.removeChild(el));
    const validMsg = document.querySelector("#formValidation");
    validMsg.dataset.invalid = "";
    document.querySelectorAll('[required]')
      .forEach(element => {
        if (element.value.trim() === "") {
          setError(element);
          validMsg.dataset.invalid = "onvolledig ingevuld";
        }
      });
    validMsg.dataset.invalid = validMsg.dataset.invalid || "all checks out well";  
  }
}

input {
  margin: 0.3rem 0;
}

.foutmelding,
.formulierMelding {
  color: red;
}

.formulierMelding:before {
  content: attr(data-invalid);
}

<div id="theForm">
  <input type="text" id="voornaam" placeholder="voornaam" required><br>
  <input type="text" id="email" placeholder="e-mailadres" required>
</div>
<button id="check">Check</button>
<span id="formValidation" data-invalid class="formulierMelding"></span>

Answer 2

попробуйте это

// select your inputs with an id
    var elements = document.querySelectorAll('#voornaam');

    $("button").click(function(){
    elements.forEach(element => {
      if (element.value === ""&& element.nextSibling.id !="error") {
        $("<span class='col-sm-12 error' id='error' style='color:red;'> Name is required.</span>").insertAfter(element);
        return 
      }
      else return true
    })  
  });
});