使用带有 jQ​​uery 不显眼验证的 HTML-5 验证弹出窗口

Posted 2023-05-09

【中文标题】使用带有 jQ​​uery 不显眼验证的 HTML-5 验证弹出窗口

【英文标题】：Using HTML-5 Validation Popups with jQuery Unobtrusive Validations

【发布时间】：2018-02-24 19:11:20

【问题描述】：

我有一个使用数据注释进行验证的 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 验证行为（我在博客文章或其他一些 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 验证挂钩到这些 HTML5 弹出窗口中以显示所有验证消息？

【问题讨论】：

您的第一个示例是利用 浏览器的 验证，与引导程序无关。至少，当我运行小提琴时，这就是我所看到的。发生这种情况是因为它直接在输入中设置了required 属性。第二个示例是利用标准 jquery 验证。

另见：***.com/questions/26531033/…

@stephen.vakil 真的吗？我刚刚假设那是 Bootstrap 以某种方式驱动它。我没有意识到今天的浏览器中有这样的行为！那么，有什么好方法可以将我的数据注释验证挂钩到其中吗？还是出于某种原因这是个坏主意？

我已经解决了我的问题，以消除我对引导程序的错误假设。删除了一些文本，但也留下了一些打击，以防其他人有与我相同的假设。

你不能。使用带有jquery.validate.unobtrusive.js 的客户端验证将novalidate 属性添加到您的表单中，这样就不会执行HTML5 验证（因为它们不能一起工作）

【参考方案1】：

使用jquery.validate.js 和jquery.validate.unobtrusive.js 文件的MVC 客户端验证和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 伪选择器添加箭头等）

【讨论】：

谢谢。这不是我希望的答案，但我相信它回答了我的问题，因为 jQuery Unobtrusive 验证与内置的 HTML5 验证不兼容（我之前将其混淆为与 Bootstrap 相关）。感谢您为我澄清这一点！