能否使用setCustomValidity对多个输入字段进行组合校验？

核心结论 #

• 无法在div等非表单控件元素上调用setCustomValidity：该方法是HTML5约束验证API的内置方法，仅支持input、select、textarea这类可参与表单提交的元素拥有该属性，普通容器元素调用会直接抛出错误。

兼容现有逻辑的实现方案 #

你可以通过给两个关联输入框绑定值变化事件，同步触发组合校验逻辑，完全适配你已有的setCustomValidity技术栈，不需要修改原有其他校验逻辑，实现方式如下：

实现步骤 #

1. 给input2和input3同时绑定input事件，任意一个值变化时都触发和值校验
2. 校验逻辑判断两个输入值之和是否等于100，不符合条件时给两个输入框同时设置自定义校验提示，符合条件时清空自定义校验状态即可

代码示例 #

<form>
  <input id="input1" required>
  <div class="sum-group">
    <input id="input2" type="number">
    <input id="input3" type="number">
  </div>
  <button type="submit">提交</button>
</form>

const input2 = document.getElementById('input2')
const input3 = document.getElementById('input3')

// 组合校验逻辑
function validateSum() {
  const val2 = Number(input2.value) || 0
  const val3 = Number(input3.value) || 0
  if (val2 + val3 !== 100) {
    const errorTip = '两个输入框的数值之和必须为100'
    // 给两个关联输入框同时设置自定义校验
    input2.setCustomValidity(errorTip)
    input3.setCustomValidity(errorTip)
  } else {
    // 校验通过清空自定义错误
    input2.setCustomValidity('')
    input3.setCustomValidity('')
  }
}

// 绑定值变化事件
input2.addEventListener('input', validateSum)
input3.addEventListener('input', validateSum)

补充说明 #

如果你只希望错误提示在某一个输入框上展示，也可以仅给其中一个输入框设置自定义校验提示，不会影响整体校验生效逻辑。

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