title: when i submit my form in case the information are wrong i would like to show only ONE error message under the input , how to do it there?
body: <p>here eachtime i submit the form with empty fields it's adding a new span under each input , i would like to add one one when the input is false and removing it when it's ok (but keeping the others if the fields are empty)</p>
  
  <pre><code>handleAddEventForm: function(event) {
          const addEventForm = event.currentTarget;
          let eventTitle = addEventForm.querySelector('#eventTitle]');
          let eventDate = addEventForm.querySelector('#eventDate]');
          let eventTime = addEventForm.querySelector('#eventTime]')
          let eventDescription = addEventForm.querySelector('#eventDescription]');
          let arrayToTest = {}
          arrayToTest.title = eventTitle;
          arrayToTest.date = eventDate;
          arrayToTest.time = eventTime;
          arrayToTest.description = eventDescription;
          arrayToTest.error = '';
          for (const key in arrayToTest) {
            if (arrayToTest[key].value !== '') {
              arrayToTest[key].style.border = "";        
            } else {
              event.preventDefault();
              let errorSpan = document.createElement('span');
              let message = 'Ce champs est obligatoire'
              errorSpan.innerText = message ;
              errorSpan.className = "errorSpan";
              errorSpan.style.color = "red";
              arrayToTest[key].style.border = "3px solid red"; 
              arrayToTest[key].after(errorSpan); 
            }
          }
        },
      };
  </code></pre>