Javascript 如何使用默认浏览器提交事件在必填字段上获取自定义错误

发布于03月15日

当执行提交event时，通常会看到哪个必填字段未填写，然后首先弹出必填字段的第一个字段.

<div class="row">
 <form>
   <div class="col-md-6">
      <div class="detailsInput">
         <input type="text" class="form-control" id="firstName" name="firstname" required data-maxlength="20" placeholder="First Name" />
      </div>
   </div>
</div>
</div>

const form = document.querySelector('form');
const nameInput = document.querySelector('#firstName');

form.addEventListener('submit', function(event) {
  if (!nameInput.checkValidity()) {
  event.preventDefault(); // Prevent form submission
  nameInput.setCustomValidity('Please enter your name'); // Set custom error 
  message
 }
});

我目前正在触发错误，它反映了所有字段，但不是前required个字段.

编辑: 需要在默认事件浏览器行为中弹出时自定义错误消息.

推荐答案

您可以try 以下操作:

const input = document.querySelector('input[name="firstname"]');

input.addEventListener('invalid', function(event) {
  if (event.target.validity.valueMissing) {
    event.target.setCustomValidity('Please tell us your lovely name.');
  }
})

input.addEventListener('keyup', function(event) {
  event.target.setCustomValidity('');
})

<form>
  <label for="name">Name:</label>
  <input type="text" id="firstname" name="firstname" required>
  <button type="submit">Submit</button>
</form>

参考文献:https://angelika.me/2020/02/01/custom-error-messages-for-html5-form-validation/