Question

我有一个使用数据注释进行验证的ASP.NET MVC站点，我想获得“免费”的客户端验证。大多数简单的工作都很好，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验证行为（我发现CSS在某个博客文章或某些其他SO问题上在线）。最终，这不是我想要的行为，我没有花时间来清理这种不完美的整合。

<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 Unobtrusive驱动的验证，以便在所有验证消息中连接到这些HTML5弹出窗口？

Answer 1

使用jquery.validate.js和jquery.validate.unobtrusive.js文件以及HTML-5验证的MVC客户端验证不能很好地协同工作。 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不显眼的验证

最终，我的问题是：

1 个答案: