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

Question

我有一个如下所示的表单，其中我放置了一个alt text，该将显示在网页上。

<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 来处理显示"警告标志"的

这是一个工作小提琴，向您展示如何使用JS来显示警告：

$('[name="e1_alt"]').blur(function(e) {
var value = $(e.currentTarget).val();
if (value.length === 0) {
$('.error').show();
}
});