为什么我有2个不同的必填字段验证弹出窗口

Question

我有2个不同的页面，每个页面上都有一个表格。

如果我将必填字段留空，则进入一页，我得到以下验证弹出窗口：

这是上图的代码：

<div class="form-group">
    <p class="control-label col-md-5"><i class="fa fa-exclamation-triangle triangle" aria-hidden="true"></i> <b>Voorletter(s)</b></p>
    <div class="col-md-4">
        @Html.EditorFor(model => model.Voorletters, new { htmlAttributes = new { @class = "form-control", required = "required", placeholder="K" } })
        @Html.ValidationMessageFor(model => model.Voorletters, "", new { @class = "text-danger" })
    </div>
</div>

但是另一方面，我会弹出一个窗口，如果您问我，它具有相同的代码：

<div class="form-group">
    <p class="control-label col-md-5"><i class="fa fa-exclamation-triangle triangle" aria-hidden="true"></i> <b>Functie</b></p>
    <div class="col-md-4">
         @Html.EditorFor(model => model.Functie1, new { htmlAttributes = new { @class = "form-control", required = "required" } })
         @Html.ValidationMessageFor(model => model.Functie1, "", new { @class = "text-danger" })
    </div>
</div>

但是我希望使用后一种方法，我怎么总是得到它？

后一个验证消息是否为chrome标准？

编辑：

之前，我试图通过制作一个元类来更改第一条验证消息“此字段是必需的”，但这仅更改了文本。

[MetadataType(typeof(medewerkerMetaData))]
public partial class medewerker
{
    public partial class medewerkerMetaData
    {
      //[Required(ErrorMessage = "Verplicht invullen!")]
        public string Voorletters { get; set; }

      // more code
    }
 }

Answer 1

首先显示来自[Required]属性的mvc客户端验证错误。第二个显示的是浏览器的HTML-5验证消息（由于required属性），这意味着您没有在该视图中包含jquery.validate.js和jquery.validate.unobtrusive.js脚本（或Thay加载不正确）广告无效）。

使用验证脚本时，它会将novalidate属性添加到表单中，因此HTML-5验证将被忽略（这2个不能很好地协同工作）。

尽管您可能会想，但您不希望浏览器进行HTML-5验证-它仅是客户端验证（不是最重要的服务器端），并且不会与服务器端验证属性匹配。