表单验证仍然提交空表单

Question

我有一个表格供用户填写每个字段。情况是，我有一个输入字段，用户将输入参与操作的人员的姓名，该姓名将列在文本区域中。我在 textarea 使用“必需”和“禁用”，因为我需要捕获用户从输入字段中插入的数据。但是，当我尝试提交一个空表单时，它仍然会向数据库发送空值。

<form name="prereport" action="insert_operation.php" method="POST">
  <div class="container">
    <div class="container-fluid">
      <input name="inputtitle" type="text" class="form-control" placeholder="Insert Operation Title" required>
      <br>
      <div class="input-group">
        <input name="inputname" type="text" class="form-control" placeholder="Insert Name of Person Going">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="addtext();">Add +</button>
        </span>
      </div>
      <br>
      <div class="output-group">
        <label for="comment">List of Person Going</label>
        <textarea name="outputname" class="form-control" rows="5" id="comment" required required></textarea>
      </div>
      <br>
      <div class="input-group">
        <input name="inputequip" type="text" class="form-control" placeholder="Insert Equipment to Bring for Operation">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="addequip();">Add +</button>
        </span>
      </div>
      <br>
      <div class="output-group">
        <label for="comment">List of equipments for operation</label>
        <textarea name="outputequip" class="form-control" rows="5" id="comment" required disabled></textarea>
      </div>
      <br>
      <br>
      <center>
        <button type="submit" class="btn btn-warning" id="check">Add</button>
      </center>
    </div>
  </div>
</form>

表格图片：

Answer 1

Quentin 想说的是，当一个字段具有“禁用”属性时，该字段将不会与表单发布一起发送。

尝试使用“只读”而不是“禁用”。

主要区别

禁用属性

禁用的表单元素的值不会传递给处理器 方法。 W3C 称这是一个成功的元素。（这类似于 未选中的表单复选框。）某些浏览器可能会覆盖或 为禁用的表单元素提供默认样式。 （灰色或 浮雕文本）Internet Explorer 5.5 对此特别讨厌。 禁用的表单元素不会获得焦点。禁用的表单元素 在标签导航中被跳过。

只读属性

并非所有表单元素都有只读属性。最值得注意的是， , , 和元素没有只读 属性（虽然你都有禁用的属性）浏览器 不提供表单元素的默认覆盖视觉反馈 只读。 （这可能是个问题……见下文。） readonly 属性集将被传递给表单处理器。读 只有表单元素可以接收焦点 只读表单元素是 包含在选项卡式导航中。