我有一个ASP .NETMVC网站,使用数据注解进行验证,我想得到“免费”的客户端验证。大多数简单的工作很好,傻瓜可以帮助我处理更复杂的场景。到目前为止一切都很好。
但是,我希望将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验证行为(我在博客文章或其他一些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>
在受支持的浏览器中,如何让Data Annotations + jQuery Unobtrusive-driven validations与这些HTML弹出窗口挂钩,以显示所有验证消息?
1条答案
按热度按时间wj8zmpe11#
MVC使用
jquery.validate.js
和jquery.validate.unobtrusive.js
文件的客户端验证和HTML-5验证不能很好地配合使用。jquery.validate.js
文件实际上向<form>
元素添加了novalidate
属性,以禁用HTML-5验证,使用以下代码如果你想让你的消息看起来像浏览器的标注,那么你总是可以使用css来样式化
@Html.ValidationMessageFor()
生成的元素。当一个表单控件无效时,一个class="field-validation-error"
会被添加到元素中,这个元素可以用来样式化(添加颜色,边框,使用::after
伪选择器添加箭头等)