如何在浏览器默认提交事件中为必填字段设置自定义错误提示

触发表单submit事件时，浏览器默认会检查未填写的必填字段，并优先在第一个必填字段上弹出提示。但当前代码设置的自定义错误消息无法正确作用于目标字段，导致默认提示行为不符合预期，需求是让浏览器默认弹出框显示自定义错误消息。

原代码 #

HTML #

<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>
 </form>
</div>

JavaScript #

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
 }
});

问题分析 #

原代码存在两个核心问题：

• setCustomValidity设置错误消息后未在字段验证通过时重置，导致验证状态残留
• 仅在提交时设置消息，但未主动触发目标字段的默认提示流程，无法保证优先显示第一个必填字段的自定义提示

解决方案 #

单字段场景 #

调整代码逻辑，确保自定义消息能通过浏览器默认提示框显示：

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

// 用户输入时重置自定义验证消息，清除残留状态
nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('');
});

form.addEventListener('submit', function(event) {
  if (!nameInput.checkValidity()) {
    event.preventDefault();
    // 设置自定义错误消息
    nameInput.setCustomValidity('请输入您的姓名');
    // 强制触发浏览器默认的验证提示
    nameInput.reportValidity();
  }
});

多必填字段场景 #

如果表单存在多个必填字段，需要先定位第一个无效字段，再为其设置自定义消息并触发提示：

const form = document.querySelector('form');

// 输入时重置所有必填字段的验证消息
form.querySelectorAll('[required]').forEach(field => {
  field.addEventListener('input', () => {
    field.setCustomValidity('');
  });
});

form.addEventListener('submit', function(event) {
  const requiredFields = form.querySelectorAll('[required]');
  let firstInvalidField = null;

  // 遍历找到第一个无效的必填字段
  requiredFields.forEach(field => {
    if (!field.checkValidity() && !firstInvalidField) {
      firstInvalidField = field;
      // 根据字段ID设置对应的自定义消息
      switch(field.id) {
        case 'firstName':
          field.setCustomValidity('请输入您的姓名');
          break;
        // 可添加其他字段的自定义消息配置
        // case 'lastName':
        //   field.setCustomValidity('请输入您的姓氏');
        //   break;
      }
    }
  });

  if (firstInvalidField) {
    event.preventDefault();
    // 触发第一个无效字段的默认提示
    firstInvalidField.reportValidity();
  }
});

关键要点 #

• setCustomValidity('')必须在用户输入时调用，否则字段会一直处于验证错误状态
• reportValidity()方法会触发浏览器原生的验证提示框，确保自定义消息按默认逻辑显示
• 多字段场景下优先定位第一个无效字段，符合浏览器默认的提示优先级

内容的提问来源于stack exchange，提问作者Arif Hussain