在输入字段下方显示错误消息

Question

是否有任何原生HTML元素可用于在输入字段下显示文本？像label这样的东西？

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

Answer 1

对于show an error message below this it if a user puts some wrong value inside that field，是的，您正在讨论显示验证错误。 HTML 5中提供了两种类型的验证错误消息：

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

自动消息

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

另一个缺点是默认消息取决于浏览器区域设置，因此，例如，如果您借用朋友的法语计算机来查看英语网站，那么这些默认错误消息将以法语显示：



来源：Mozilla开发者网络文章：Data form validation

自定义消息

正如Data form validation所说：

  

要自定义这些消息的外观和文本，您必须使用JavaScript;没有办法只使用HTML和CSS。

     

HTML5提供the constraint validation 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编写自己的消息。

Answer 2

Asp.net核心

 <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>

上面的代码将label Text-field和validation message连续对齐 如果您要以下验证消息，请尝试以下代码

<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>