使用 HTML-5 验证弹出窗口和 jQuery 不显眼的验证

Question

我有一个 ASP.NET MVC 站点，它使用数据注释进行验证，我想获得 "free" 客户端验证。大多数简单的方法都能很好地工作，而 Foolproof 可以帮助我处理更复杂的场景。到目前为止一切都很好。

~~不过，我也在使用 Bootstrap，我想利用 Bootstrap 的 UI 进行验证。我对 Bootstrap 不是很有经验，所以请原谅我在这里可能有的任何错误假设。~~（显然我错了，Bootstrap 在这个问题中并不重要。）

但是，我想将 HTML5 验证与浏览器支持结合起来。具体来说，我想为所有客户端验证消息使用小弹出窗口。

我在这里创建了一个 jsFiddle 示例来解释我想要的和来自：https://jsfiddle.net/4nftdufu/

第一种形式 (Foo) 显示了我希望看到的行为。

<form class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" id="inputFoo" placeholder="Type Foo Here" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit Foo</button>
</form>

第二种形式 (Bar) 基本上就是我的出发点。请注意，我在这里涉及一些 Bootstrap 验证行为（我在博客 post 或其他一些 SO 问题中的某个地方在线发现 CSS）。最终，这不是我想要的行为，我也没有花任何时间清理这个不完美的集成。

<form class="form-inline">
    <div class="form-group">
        <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="inputBar" name="inputBar" placeholder="Enter Bar here" type="text" value="" aria-required="true" aria-describedby="Bar-error" aria-invalid="true">
        <p class="help-block"><span class="field-validation-valid" data-valmsg-for="inputBar" data-valmsg-replace="true"></span></p>
    </div>
    <button type="submit" class="btn btn-primary">Submit Bar</button>
</form>

最终，我的问题是：

如何在受支持的浏览器中获取我的数据注释 + jQuery 不显眼的驱动验证以挂钩所有验证消息的这些 HTML5 弹出窗口？

Answer 1

MVC 使用 jquery.validate.js 和 jquery.validate.unobtrusive.js 文件的客户端验证与 HTML-5 验证不能很好地协同工作。 jquery.validate.js 文件实际上将 novalidate 属性添加到您的 <form> 元素以使用以下代码禁用 HTML-5 验证

// Add novalidate tag if HTML5.
this.attr( "novalidate", "novalidate" );

如果您希望您的消息看起来像浏览器的标注，那么您始终可以使用 css 来设置 @Html.ValidationMessageFor() 生成的元素的样式。当表单控件无效时，将 class="field-validation-error" 添加到可用于样式设置的元素（添加颜色、边框、使用 ::after 伪选择器添加箭头等）

使用 HTML-5 验证弹出窗口和 jQuery 不显眼的验证

Using HTML-5 Validation Popups with jQuery Unobtrusive Validations

html

validation

asp.net-mvc

jquery

html5-validation

最终，我的问题是：