html - 使用 HTML，如何知道所有必需的输入是否不为空，以便我可以启用提交按钮？

Question

我有一个表单，如果不为空，我需要检查所有必需的输入，以便我可以启用提交按钮。

<form id="inquiry-component-form" method="post">
   <input id="inquiry-media-outlet" type="text" name="media_outlet" required>
   <input id="inquiry-name" class="form-control" type="text" name="name" required>

   <button id="submit-inquiry-form" disabled type="submit">Submit</button>
</form>

我试图用 jQuery 做到这一点，问题是这是不可能的，因为 Liquid/Jekyll 代码在构建时运行。所以我需要知道一种用 HTML 来做到这一点的方法。

关于如何实现我需要的任何想法？

标签： htmlformsvalidation

Answer 1

你不能只用HTML 做到这一点，但你可以用 CSS。

input[type=text]:not(:valid) ~ button[type=submit] {
  pointer-events: none; /* Disables mouse pointer interactions */
  
  /* Styles to make it look like it's disabled */
  opacity: 0.6;
}

<form id="inquiry-component-form" method="post">
  <input id="inquiry-media-outlet" type="text" name="media_outlet" required>
  <input id="inquiry-name" class="form-control" type="text" name="name" required>

  <button id="submit-inquiry-form" type="submit">Submit</button>
</form>

解释：

input[type=text]:not(:valid) ~ button[type=submit]- 选择类型为无效 ( ) 输入submit的兄弟类型的按钮。:not(:valid)text

• pointer-events我可以用吗
• :valid我可以用吗

tabindex="-1"如果您想防止跳格和输入，您还必须添加到按钮。