HTML表单文本输入框同时设readonly和required后required失效问题

HTML规范明确规定：设置了readonly属性的表单控件会被自动排除在必填校验逻辑之外，required属性会直接失效。浏览器不会对这类字段进行非空检查，所以即便字段为空，表单也能正常提交。

以下几种方案可以满足「用户无法手动输入+字段必填」的需求：

方案一：保留readonly，添加自定义前端校验 #

在表单提交时手动检查字段值，若为空则阻止提交并提示用户。示例代码：

<form onsubmit="return validateMypid()">
  <input type="text" class="form-control form-control-sm" id="mypid" name="mypid" value="" placeholder="" readonly="readonly">
  <button type="submit">提交</button>
</form>

<script>
function validateMypid() {
  const input = document.getElementById('mypid');
  if (!input.value.trim()) {
    alert('mypid字段不能为空');
    return false; // 阻止表单提交
  }
  return true;
}
</script>

方案二：移除readonly，用JS+CSS限制输入 #

移除readonly属性，通过JavaScript阻止用户输入操作，同时用CSS保持不可编辑的视觉样式，让required属性正常生效：

<input type="text" class="form-control form-control-sm" id="mypid" name="mypid" value="" placeholder="" required 
       onkeydown="return false" onpaste="return false" 
       style="background-color: #e9ecef; cursor: not-allowed;">

注意：这种方式用户仍可通过浏览器控制台修改字段值，必须配合后端校验。

方案三：隐藏字段+只读文本展示（推荐） #

用隐藏字段存储真实值（用于表单提交和校验），同时用普通文本展示内容给用户，完全避免用户修改的可能：

<!-- 隐藏字段，用于表单提交和必填校验 -->
<input type="hidden" id="mypid" name="mypid" value="" required>
<!-- 只读文本展示给用户 -->
<span class="form-control form-control-sm" style="background-color: #e9ecef;">
  <span id="mypid-display"></span>
</span>

自动填充字段时，同时更新隐藏字段和显示文本：

// 示例自动填充逻辑
const autoPid = "生成的PID值";
document.getElementById('mypid').value = autoPid;
document.getElementById('mypid-display').textContent = autoPid;

无论采用哪种前端方案，后端必须对该字段做必填校验。前端校验仅用于提升用户体验，无法防止恶意绕过（比如直接调用接口提交数据）。

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