jQuery Mobile and Unobtrusive Validation

Question

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?

Extravaganza

I wondered about unique ids with JQM and it still bothers me. JQM authors themselves don't say much about it. I even saw an example of presistent footers where ids got duplicated. I see two solutions - either take care of your IDs yourself, or destroy JQM caching by forcefully removing the page you leave from the DOM as the new one is being loaded - pagebeforecreate event – Extremadura

We're having similar issues, but haven't got it working at all. We're on jQ 1.5 and jQM 1.03a. Struggling here.. – Wells

Answer 1

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.

Wells

This should be accepted as the answer. The latest code for jQuery 1.7 and jqm 1.2 would be: $(document).on('pageinit', '#feedback_page', function (e) { $.validator.unobtrusive.parse($(this).find('form')); }); – Robinson

Answer 2

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

Musketeer

Answer 3

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

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

Ayeaye