在输入框下方显示错误信息

Question

有没有一种原生的HTML元素可以用于在输入字段下方显示文本？类似于 label ？

现在，我在表单中间有一个 input 字段，如果用户在该字段中输入了错误的值，我想在其下方显示一个错误消息。

- Arian

Answer 1

要在用户输入错误值时，在其下方显示错误消息，您所说的是显示验证错误。HTML5中有两种类型的这些验证错误消息可用：

1. 自动消息
2. 自定义消息

自动消息

自动消息只是使用HTML5表单属性。但缺点是它们是自动的，不能默认自定义。例如，如果您需要一个电子邮件地址，当您指定电子邮件输入并未写入电子邮件时，在Firefox上的默认错误消息是：Please enter an email address，您将无法仅使用HTML和CSS更改此消息。

另一个缺点是默认消息取决于浏览器语言环境，因此，如果您借用朋友的法语计算机查看英文网站，则这些默认错误消息将以法语显示：

来源：Mozilla Developer Network文章：Data form validation

自定义消息

正如Data form validation所说：

要自定义这些消息的外观和文本，必须使用JavaScript；不能仅使用HTML和CSS完成此操作。

HTML5提供了约束验证API来检查和自定义表单元素的状态。

Data form validation中的示例：

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

是的，你可以在HTML5中在输入框下方显示消息。只要注意它们将是自动类型，或者如果想要进行自定义，则需要使用约束验证API来编写自己的JavaScript消息。

- clarity123

Answer 2

Asp.net core

 <div class="form-group row col-md-12 field-space">
       <label asp-for="Code" class="col-sm-3 col-form-label required"></label>
       <input asp-for="Code" class="form-control form-control-sm col-sm-3" placeholder="Code" />
       <span asp-validation-for="Code" class="text-danger col-sm-4"></span>
    </div>

以上代码将会把 标签、文本框 和 验证信息 对齐在同一行。 如果您想要将验证信息放在下方，请尝试以下代码。

<div class="form-group">
   <label asp-for="Code" class="col-form-label required"></label>
   <input asp-for="Code" class="form-control form-control-sm " placeholder="Code"/>
    <span asp-validation-for="Code" class="text-danger "></span>
</div>

- R J