使用带有jQuery的HTML-5验证弹出窗口进行不引人注目的验证

我有一个ASP.NETMVC站点，它使用数据注释进行验证，我希望获得“免费”的客户端验证。大多数简单的方法都很好用，而且万无一失可以帮助我处理更复杂的场景。到目前为止一切都很好

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

不过，我希望将HTML5验证与浏览器支持结合起来。具体地说，我想对所有客户端验证消息使用小弹出窗口

我在这里创建了一个JSFIDLE示例，解释了我想要什么和我的来源：

我想看到的行为由第一个表单（

Foo

）显示

最后，我的问题是：

---

在受支持的浏览器中，如何让我的数据注释+jQuery Unobtrusive驱动的验证连接到这些HTML5弹出窗口中，以获取所有验证消息？使用

jQuery.validate.js

和

jQuery.validate.Unobtrusive.js

文件和HTML-5验证的MVC客户端验证不起作用我们在一起很好。实际上，

jquery.validate.js

文件将

novalidate

属性添加到

元素中，以使用以下代码禁用HTML-5验证

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

---

如果希望消息看起来像浏览器的标注，则可以始终使用css设置由

@Html.ValidationMessageFor（）

生成的元素的样式。当表单控件无效时，会向可用于样式设置的元素添加一个

class=“field validation error”

（添加颜色、边框，使用

：：在
伪选择器之后添加箭头等）
您的第一个示例是利用浏览器的验证，与引导无关。至少，当我拉小提琴的时候，我看到了。这是因为它直接在输入中设置
required
属性。第二个例子是利用标准jquery验证。另请参见：@stephen.vakil真的吗？我只是认为这是某种引导驱动力。我不知道今天浏览器里有这种行为！那么，有什么好方法可以将我的数据注释验证与之挂钩呢？或者出于某种原因，这是个坏主意？我修正了我的问题，以消除我对引导的错误假设。删除了一些文字，但也留下了一些文字，以防其他人与我的假设相同。你不能。将客户端验证与
jquery.validate.unobtrusive.js一起使用将
novalidate
属性添加到表单中，这样就不会执行HTML5验证（因为它们不能一起工作）。这不是我所希望的答案，但我相信它回答了我的问题，因为jQuery不引人注目的验证与内置的HTML5验证不兼容（我以前把它混淆为与引导相关）。谢谢你为我澄清这一点！
<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>

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