HTML中使用setCustomValidity后required空字段提示不显示怎么办？

你的代码有两个关键问题导致必填提示不显示：

1. 语法错误：oninput属性的双引号未闭合，导致后面的required属性没被浏览器正确识别，相当于没启用必填规则。
2. 验证逻辑覆盖默认提示：不管字段是空还是输入非字母内容，当前的setCustomValidity都会统一设置字母验证提示，把空字段的必填提示覆盖了。

修复后的代码 #

<div class="form-group">
  <label for="add_new_location">Location Name: <span class="required_label"> *</span></label>
  <input type="text" class="IPTextUpper" id="add_new_location" name="add_new_location" value="" placeholder="Location Name" pattern="[A-Za-z]+" required oninput="
    if (this.validity.valueMissing) {
      this.setCustomValidity('请填写此字段');
    } else if (this.validity.patternMismatch) {
      this.setCustomValidity('请仅输入字母字符');
    } else {
      this.setCustomValidity('');
    }
  " />
</div>

关键修正说明 #

• 先补上oninput的双引号，让required属性正常生效，浏览器才会将该字段标记为必填项。
• 通过validity对象区分两种错误场景：
  • 字段为空时（valueMissing），设置自定义必填提示；
  • 输入不符合字母规则时（patternMismatch），设置字母验证提示；
  • 输入合法时，清空自定义提示，让浏览器正常处理验证状态。

简化版（使用浏览器原生提示） #

如果不想自定义必填提示，想用浏览器自带的“请填写此字段”，可以简化逻辑：

<div class="form-group">
  <label for="add_new_location">Location Name: <span class="required_label"> *</span></label>
  <input type="text" class="IPTextUpper" id="add_new_location" name="add_new_location" value="" placeholder="Location Name" pattern="[A-Za-z]+" required oninput="
    this.setCustomValidity(this.validity.patternMismatch ? '请仅输入字母字符' : '');
  " />
</div>

这种写法下，空字段时浏览器会自动弹出原生必填提示，仅在输入非字母内容时显示自定义的字母验证提示。

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