Как сделать, чтобы при отправке пустой формы, поля формы, которые не были заполнены становились красными?

Question

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

<form action="">
  <div class="form-inner">
    <p><input placeholder="Name" name="name" required></p>
    <p><input placeholder="City" name="city" required></p>
    <p><input placeholder="Email" name="email" required></p> 
    <p><input placeholder="Subject" name="subject" required></p>
    <p><textarea placeholder="Message" name="mesage" required></textarea></p>
    <p><input type="submit" value="Send"></p>
  </div>
</form>

Answer 1

Как вариант, можно вот так:

window.onload = function() {
  let form = document.querySelector('.form');
  form.addEventListener('submit', function(event) {
    let controls = this.querySelectorAll('.form-control');
    let isValid = true;
    controls.forEach(control => {
      control.classList.remove('invalid-control');
      if (control.classList.contains('required') && !control.value) {
        control.classList.add('invalid-control');
        isValid = false;
      }
    });
    
    if (!isValid) {
      event.preventDefault();
    }
  });
}

.invalid-control {
  border-color: red !important;
}

.form-control {
  border: 1px solid;
}

<form class="form">
  <div class="form-inner">
    <p><input placeholder="Name" name="name" class="form-control required"></p>
    <p><input placeholder="City" name="city" class="form-control required"></p>
    <p><input placeholder="Email" name="email" class="form-control required"></p> 
    <p><input placeholder="Subject" name="subject" class="form-control required"></p>
    <p>
      <textarea placeholder="Message" name="mesage" class="form-control required"></textarea>
    </p>
    <p><input type="submit" value="Send"></p>
  </div>
</form>

Answer 2

Как вариант:

document.querySelector('#form [type="submit"]').addEventListener('click', function(e) {
  let form = e.target.closest('form');
  [...form.querySelectorAll('[required]')].forEach(function(e){
    if(!e.value.length > 0) {
      e.removeAttribute('required');
      e.classList.add('--required');
    }
  });
  if(form.querySelectorAll('.--required').length > 0)
    e.preventDefault();
});

document.addEventListener('change', function(e) {
  if(e.target.classList.contains('--required') 
  && e.target.value.length > 0) {
    e.target.classList.remove('--required');
    e.target.setAttribute('required', true);
  }
});

.--required {
  border-color: red;
}

<form id="form" action="">
  <div class="form-inner">
    <p><input placeholder="Name" name="name" required></p>
    <p><input placeholder="City" name="city" required></p>
    <p><input placeholder="Email" name="email" required></p>
    <p><input placeholder="Subject" name="subject" required></p>
    <p><textarea placeholder="Message" name="mesage" required></textarea></p>
    <p><input type="submit" value="Send"></p>
  </div>
</form>

БЛОГ НА HUSL

Как сделать, чтобы при отправке пустой формы, поля формы, которые не были заполнены становились красными?

Ответы (2 шт):