关于表单单字段调用CheckValidity()的问题：双按钮差异化验证需求

我明白你遇到的问题啦——同一个表单里不同按钮要对应不同的验证范围，默认的checkValidity()会一股脑验证所有必填项，确实不符合你的需求。下面给你一套具体的解决方案：

首先，先补全你截断的表单代码（给按钮加上ID，方便后续JS绑定事件）：

<form id="form" name="form">
  <input required type="text" name="test1" id="test1" class="testfields" value="<?php echo (isset($checkTEST))?$checkTEST:'';?>">
  <p></p>
  <input required type="text" name="test2" id="test2" class="testfields" value="<?php echo (isset($checkTEST2))?$checkTEST2:'';?>">
  <p></p>
  <button type="button" id="checkBtn">Check</button>
  <button type="button" id="addBtn">Add</button>
</form>

核心思路是：阻止表单的默认提交行为，针对不同按钮手动触发对应字段的验证逻辑，而不是直接调用整个表单的checkValidity()。

具体JavaScript实现 #

// 获取表单和字段元素
const form = document.getElementById('form');
const test1 = document.getElementById('test1');
const test2 = document.getElementById('test2');
const checkBtn = document.getElementById('checkBtn');
const addBtn = document.getElementById('addBtn');

// 封装单个字段的验证函数，减少重复代码
function validateField(field, errorMsg = '此字段不能为空') {
  // 先清除之前的自定义错误提示
  field.setCustomValidity('');
  // 检查字段是否有效
  if (!field.checkValidity()) {
    // 设置自定义错误信息
    field.setCustomValidity(errorMsg);
    // 触发浏览器原生的验证提示（和默认表单验证样式一致）
    field.reportValidity();
    return false;
  }
  return true;
}

// "Check"按钮：仅验证test1字段
checkBtn.addEventListener('click', () => {
  if (validateField(test1, 'Test1字段不能为空')) {
    // 验证通过后的逻辑，比如提交部分数据、执行检查操作等
    console.log('Test1验证通过，执行检查逻辑');
    // 如果需要提交表单（仅基于test1的验证），可以在这里调用 form.submit()
  }
});

// "Add"按钮：验证test1和test2两个字段
addBtn.addEventListener('click', () => {
  const isTest1Valid = validateField(test1, 'Test1字段不能为空');
  const isTest2Valid = validateField(test2, 'Test2字段不能为空');
  
  if (isTest1Valid && isTest2Valid) {
    // 所有字段验证通过，执行添加逻辑或提交表单
    console.log('所有字段验证通过，执行添加逻辑');
    // 提交表单
    form.submit();
  }
});

关键方法说明 #

• checkValidity()：单个字段调用时，仅检查该字段是否符合验证规则（比如是否为空），返回布尔值。
• setCustomValidity()：用来设置字段的自定义错误信息，若传入非空字符串，字段会被标记为无效。
• reportValidity()：触发浏览器原生的验证提示框，和默认表单验证的用户体验一致，不用自己写弹窗样式。

这样处理后，两个按钮就会按照你的需求分别触发不同范围的验证啦～

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