使用带有jQuery的HTML-5验证弹出窗口进行不引人注目的验证
我有一个ASP.NETMVC站点,它使用数据注释进行验证,我希望获得“免费”的客户端验证。大多数简单的方法都很好用,而且万无一失可以帮助我处理更复杂的场景。到目前为止一切都很好 然而,我也在使用Bootstrap,我想利用Bootstrap的UI进行验证。我对Bootstrap不是很有经验,所以请原谅我在这里的错误假设。(显然我错了,引导在这个问题上并不重要。) 不过,我希望将HTML5验证与浏览器支持结合起来。具体地说,我想对所有客户端验证消息使用小弹出窗口 我在这里创建了一个JSFIDLE示例,解释了我想要什么和我的来源: 我想看到的行为由第一个表单(使用带有jQuery的HTML-5验证弹出窗口进行不引人注目的验证,jquery,asp.net-mvc,html,validation,html5-validation,Jquery,Asp.net Mvc,Html,Validation,Html5 Validation,我有一个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" );