реализация insertbefore() в цикле

Question

Я пытаюсь показать сообщения об ошибках ниже массива текстовых полей, которые я выбрал с помощью Javascript. Сообщения об ошибках помещаются путем создания нового элемента span и использования метода insertBefore(). Элемент span создается в функции, так как я не хочу жестко кодировать его в DOM. Сообщения о span показывают, но каждый раз, когда я отправляю форму, они добавляются снова и снова. Я хотел бы показывать сообщения span только один раз и каждый раз, когда форма отправляется, они отображаются только один раз. Ниже мой код.

HTML

<div class="slideshow"> 
    <form id="form"> 
     <input type="text" name="1" class="textbox" /> 
     <input type="text" name="2" class="textbox" /> 
     <input type="text" name="3" class="textbox" /> 

     <input type="submit" name="submit" value="submit" id="submit" /> 
    </form> 
</div> 

JAVASCRIPT

<script> 
    var slideshow = document.querySelector('.slideshow'); 
    // var span = document.createElement('span'); 
    var form = document.querySelector('#form'); 
    var inputs = form.querySelectorAll('.textbox'); 

    form.addEventListener('submit', function(e) 
    { 
     e.preventDefault(); 
     for(var i=0; i<inputs.length; i++) 
     { 
      var span = document.createElement('span'); 
      (function(index) 
      { 
       span.innerHTML = 'error ' + index; 
       inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling); 
      })(i); 
     } 
    }, false); 
</script> 

Каждый раз, когда я представляю, я хотел бы сообщения об ошибках, которые будут показаны ниже текстового поля, а не добавляется снова и снова. Они должны отображаться только один раз, и я хотел бы сделать это без использования jQuery или любой библиотеки.

Answer 1

Просто выполните проверку перед вставкой. Вот один из способов сделать это.

form.addEventListener('submit', function (e) { 
    e.preventDefault(); 
    for (var i = 0; i < inputs.length; i++) { 
     var span = document.createElement('span'); 
     (function (index) { 
      span.innerHTML = 'error ' + index; 
      if (inputs[index].nextElementSibling.tagName !== 'SPAN') 
       inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling); 
     })(i); 
    } 
}, false); 

Answer 2

Я повторно использую ваш пример для создания доступных тэгов span вместо их вставки в код. Если есть какие-то ошибки, заселите их, а не создавайте/удаляйте пробелы в коде.

var slideshow = document.querySelector('.slideshow'); 
 
    var form = document.querySelector('#form'); 
 
    var inputs = form.querySelectorAll('.textbox'); 
 

 
    form.addEventListener('submit', function (e) { 
 
     e.preventDefault(); 
 
     for (var i = 0; i < inputs.length; i++) { 
 
      (function (index) { 
 
       document.getElementsByTagName('span')[index] 
 
       .innerHTML = 'error ' + index; 
 
      })(i); 
 
     } 
 
    }, false);

<div class="slideshow"> 
 
     <form id="form"> 
 
      <input type="text" name="1" class="textbox" /><span></span> 
 
      <input type="text" name="2" class="textbox" /><span></span> 
 
      <input type="text" name="3" class="textbox" /><span></span> 
 
      <input type="submit" name="submit" value="submit" id="submit" /> 
 
     </form> 
 
    </div>

Надеется, что это поможет.

Answer 3

Вам нужно подождать, пока страница будет загружаться, вы должны запустить JavaScript.

PageLoad события: window.onload = функция() {}

Код:

<script type="text/javascript"> 
    window.onload = function() { 
     var slideshow = document.querySelector('.slideshow'); 
     var form = document.getElementById('form'); 
     var inputs = document.querySelectorAll('.textbox'); 
     form.addEventListener('submit', function (e) { 
      e.preventDefault(); 
      for (var i = 0; i < inputs.length; i++) { 
       var span = document.createElement('span'); 
       (function (index) { 
        span.innerHTML = 'error ' + index; 
        inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling); 
       })(i); 
      } 
     }, false); 
    } 
</script> 

Поместите свой код в случае window.onload.