jQuery Mobile 和非侵入式验证

发布于 2024-10-16 16:42:09 字数 1314 浏览 2 评论 0原文

我正在创建一个基于 jQuery Mobile (Alpha 3) 的 <一个 href="http://www.asp.net/mvc/mvc3" rel="nofollow">ASP.NET MVC 3 应用程序,利用 MVC3 附带的不显眼的验证。当直接访问页面时(URL 中没有哈希值),验证工作正常。但是,当您导航到该页面时,jQuery Mobile 使用 Ajax 导航来动态加载该页面(在 Url 中显示哈希值),并且验证将停止工作。

以下是正在使用的代码示例:

模型:

[Required(ErrorMessage = "Missing value")]
[DisplayName("Property Display Name")]
public int? PropertyName { get; set; }

视图(Razor):

@Html.LabelFor(model => model.PropertyName)
@Html.TextBoxFor(model => model.PropertyName)
@Html.ValidationMessageFor(model => model.PropertyName)

生成的 HTML:

<label for="PropertyName">Property Display Name</label>
<input data-val="true" data-val-number="The field Property Display Name must be a number." data-val-required="Missing value" id="PropertyName" name="PropertyName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PropertyName" data-valmsg-replace="true"></span>

可能已加载其他页面以前,HTML 元素不再具有唯一的 ID。除了滚动我自己的 Html Helper 类来生成 Label、TextBox 和 ValidationMessage 的 HTML 之外,还有其他方法可以处理这种情况吗?

I'm creating a jQuery Mobile (Alpha 3) based ASP.NET MVC 3 application utilizing the unobtrusive validation that comes with MVC3. When a page is accessed directly (no hash in the Url), validation works perfectly. However, when you navigate to the page, jQuery Mobile uses Ajax Navigation to dynamically load it (displaying the hash in the Url) and validation stops working.

Here is a sample of the code in use:

Model:

[Required(ErrorMessage = "Missing value")]
[DisplayName("Property Display Name")]
public int? PropertyName { get; set; }

View (Razor):

@Html.LabelFor(model => model.PropertyName)
@Html.TextBoxFor(model => model.PropertyName)
@Html.ValidationMessageFor(model => model.PropertyName)

Generated HTML:

<label for="PropertyName">Property Display Name</label>
<input data-val="true" data-val-number="The field Property Display Name must be a number." data-val-required="Missing value" id="PropertyName" name="PropertyName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PropertyName" data-valmsg-replace="true"></span>

It is possible that other pages have been loaded previously and the HTML elements no longer have unique Ids. Other than rolling my own Html Helper class to generate the HTML for the Label, TextBox, and ValidationMessage, is there any way to handle this scenario?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

吃→可爱长大的 2024-10-23 16:42:09

我一直在解决同样的问题,但@Zote 为我指明了正确的方向。

parse() 是可行的方法,但请确保传入选择器,即:

jQuery.validator.unobtrusive.parse("form")

jQuery.validator.unobtrusive.parse(document)

连接此的最佳方法可能是通过 JQMpageshow 事件。然后,这将在每次新页面转换后触发,如下所示,您可能还希望在 jqm 在页面上完成它的魔力之前通过

$('div').live('pageshow',function(event){
  jQuery.validator.unobtrusive.parse(".ui-page-active form");
});

使用 pagebeforeshow 事件来执行此操作.ui-page-active,您可以将搜索范围缩小到当前活动页面。

I've been struggling a bit with this same issue, but @Zote pointed me in the right direction.

parse() is the way to go, but make sure to pass in a selector ie:

jQuery.validator.unobtrusive.parse("form")

or

jQuery.validator.unobtrusive.parse(document)

The best way of hooking this up is probably through JQMspageshow event. This would then be triggered after each new page transition, like so, You may also prefer to do this before jqm has done it's magic on the page as well by using the pagebeforeshow event

$('div').live('pageshow',function(event){
  jQuery.validator.unobtrusive.parse(".ui-page-active form");
});

By using the .ui-page-active, you narrow your search down to the currently active page.

手心的海 2024-10-23 16:42:09

加载新内容后您是否调用了 jQuery.validator.unobtrusive.parse() ?
请阅读 Brad Wilson 博客上的这篇文章

Did you call jQuery.validator.unobtrusive.parse() after loaded new content?
Read this post at Brad Wilson's blog.

深海蓝天 2024-10-23 16:42:09

我解决了遇到的同样问题,我的答案发布在这里 -

将 jquery mobile 与 asp.net mvc2 结合使用时出现哈希导航问题

I solved the same problem I encountered, my answer is posted here -

Hash navigation problem while using jquery mobile with asp.net mvc2

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文