为什么我不能向服务器提交一个空文本框

Question

当我单击 'save new post' 按钮并提供标题和 body 内容时，发送请求的操作成功，但如果我将一个字段留空，则请求不成功甚至没有。这是我的代码：

<form action="/create-post" method="POST">
  <div class="form-group">
    <label for="post-title" class="text-muted mb-1"><small>Title</small></label>
    <input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
  </div>

  <div class="form-group">
    <label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
    <textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
  </div>
  
  <button class="btn btn-primary">Save New Post</button>
</form>

这就是我将字段留空时得到的结果： form behavor after submitting empty field

图中，'Compila questo campo'就是'Fill in this field'

编辑：谢谢你提醒我这是因为 required 字段，但是为什么在这个例子中如果 title 字段我不能提交是空的，但是如果 body 是空的？

<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
  <label for="post-title" class="text-muted mb-1"><small>Title</small></label>
  <input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>

<div class="form-group">
  <label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
  <textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
  </textarea>
</div>

<button class="btn btn-primary">Save Changes</button>

请注意，这是一个 ejs 模板，所以它是 <% 和 <%=

Answer 1

您明确表示用户是 required to fill in a value。

如果该字段是可选的，请不要这样做。

Answer 2

因为您的 <input> 和 <textarea> 标签具有 required 属性。如果您想让它们成为可选属性，请删除该属性。

Answer 3

您正在对文本框和文本区域使用必需的属性。

所需的属性是布尔属性。

如果存在，它指定必须在提交表单之前填写输入字段。

这是客户端（浏览器端验证）。

Reference

Answer 4

您的两个输入都需要属性。所以你不能用这种方式提交这个表单。

See here for details

例如，在此示例中，您可以提交表单：

<!DOCTYPE html>
<html>
<body>

<h1>The button type attribute</h1>

<form action="#" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

</body>
</html>

但在这个例子中你不能：

<!DOCTYPE html>
<html>
<body>

<h1>The button type attribute</h1>

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" required><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" required><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

</body>
</html>

祝你好运。

为什么我不能向服务器提交一个空文本框

why can't I submit an empty textbox to the server

html

forms

bootstrap-4