javascript - 如何在 html5 中构建表单时显示警告标志？

Question

我有一个如下所示的表单，其中放置了将在网页上显示的替代文本。

<form action="/action_page.php">
  Alt <input type="text" name="e1_alt" required>
  <input type="submit">
</form>

这里的表单不会保存，因为我已经使用了其中的必填字段。我想要实现的是，如果它为空，则应显示警告标志，但不应阻止用户保存它。

问题陈述:我想知道我应该在上面的 HTML 代码或我需要添加的 JavaScript 代码中进行哪些更改，以便在出现以下情况时显示警告标志:是空的但它不应该阻止用户保存它。

Answer 1

您实际上无法纯粹使用 HTML 来完成此操作。 JavaScript 需要处理验证。如果您的必填字段为空，HTML5 表单将不会提交，因为这就是浏览器处理它们的方式。您可以将 novalidate 添加到表单作为属性，但您仍然需要一些 javascript 来处理显示“警告标志”

这是一个工作 fiddle向您展示如何使用 JS 来显示警告:

$('[name="e1_alt"]').blur(function(e) {
    var value = $(e.currentTarget).val();

  if (value.length === 0) {
    $('.error').show();
  }
});