Я хочу показать сообщение об ошибке при проверке формы, когда пользователь не вводит ввод

Question

Я хотел сделать проверку формы. Синтаксической ошибки нет, но она работает не так, как я хотел. Это из-за ошибки в элементах js или Html? Я смотрел видео, но оно отлично работает в этом видео, но не работает для меня. Я все еще новичок в Javascript. Думаю, Html и css нормально работают. Ошибка в электронной почте отображается в имени пользователя, тогда как ошибка в электронной почте отображается в элементе Html. Вот изображение результата

    const form= document.getElementById('form');
    const username= document.getElementById('username');
    const email= document.getElementById('email');
    const password= document.getElementById('password');
    

    function showError(input,message){       
    const formControl=input.parentElement;
    formControl.className='form-control error';
    const small= document.querySelector('small');
    small.innerText=message;
    }

    function showSuccess(input){
        const formControl=input.parentElement;
        formControl.className='form-control success';
    }
    
    function CheckErrors(inputArr){
        inputArr.forEach(function(input){
    if(input.value.trim()===''){
      showError(input,`${input.id} is required`);
    }
        });

    }
  
    form.addEventListener('submit',function(e){
        e.preventDefault();
        CheckErrors([username,email]);
    });

:root{
    --success-color:aqua;
    --error-color:red;
}
.form-control.success input{
    border-color: var(--success-color);
}
.form-control.error input{
    border-color: var(--error-color);
}
.form-control small{
    color:var(--error-color);
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
}
.form-control.error small{
    visibility: visible;
}

<div class="container">
    <form id="form" class="form"> 
      <h2>Register</h2>
      <div class="form-control">
          <label for="username">Username</label>
          <input type="text" id="username" placeholder="Enter Username">
          <small>Errors</small>
      </div> 
      <div class="form-control">
        <label for="email">Email</label>
        <input type="text" id="email" placeholder="Enter Email">
        <small>Errors</small>
  </div>

Answer 1

Вам необходимо использовать nextElementSibling не querySelector , который выберет только первый найденный.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');


function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = input.nextElementSibling; // update here 
  small.innerText = message;
}

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

function CheckErrors(inputArr) {
  inputArr.forEach(function(input) {
    if (input.value.trim() === '') {
      showError(input, `${input.id} is required`);
    }
  });

}

form.addEventListener('submit', function(e) {
  e.preventDefault();
  CheckErrors([username, email]);
});

:root {
  --success-color: aqua;
  --error-color: red;
}

.form-control.success input {
  border-color: var(--success-color);
}

.form-control.error input {
  border-color: var(--error-color);
}

.form-control small {
  color: var(--error-color);
  visibility: hidden;
}

.form-control.error small {
  visibility: visible;
}

<div class="container">
  <form id="form" class="form">
    <h2>Register</h2>
    <div class="form-control">
      <label for="username">Username</label>
      <input type="text" id="username" placeholder="Enter Username">
      <small>Errors</small>
    </div>
    <div class="form-control">
      <label for="email">Email</label>
      <input type="text" id="email" placeholder="Enter Email">
      <small>Errors</small>
      <input type="submit">
    </div>
  </form>