Hi all,

I am working with MVC 4, jQuery UI and jQuery Validation. Also knockout but thats not an issue.

My problem is that I can get the validation to work on the view. But when I open the jQuery UI dialog as a template and have some input fields there, the validation doesn't seem to trigger.

Here is my code - what am I missing? Is it scoping? In that case how come Knockout is working?

2. @model App.Models.RegisterModel  
3. @{
4.   ViewBag.Title = "Home";
5. }
6. 
   
7. @section featured {
8. <section class="featured">
9.     <div class="content-wrapper">
10.         <hgroup class="title">
11.             <h1>Welcome</h1>
12.             <br />
13.             <h2>@ViewBag.Message</h2>
14.         </hgroup>
15.         <p>
16.      TEXT
17.         </p>
18.     </div>
19. </section>
20. }
21. 
    
22. 
    
23.      <div id="MainUser">
24. 
    
25.         <section class="featured">
26.         <div class="content-wrapper">
27. 
    
28.             @using (Html.BeginForm())
29.             {
30.                 @Html.AntiForgeryToken()
31.                 @Html.ValidationSummary()
32. 
    
33.                 <fieldset>
34.                     <legend>Registration Form</legend>
35.                     <ol>
36.                                          <li>
37.                             @Html.LabelFor(m => m.UserName)
38.                             @Html.TextBoxFor(m => m.UserName)
39.                         </li>
40.                      </ol>
41.                     <input type="submit" value="Register" />
42.                     @*<button data-bind="jqButton: {}, click: $root.accept">Accept</button>*@
43.                     @*<button data-bind="jqButton: {}, click: $root.cancel">Cancel</button>*@
44.                 </fieldset>               
45.             }
46.         </div>
47.     </section>
48. 
    
49. <div style="background-color: White;" id="addUser" data-bind="jqDialog: { autoOpen: false, resizable: false, modal: true, width: 500 }, template: { name: 'addUserTemplate', data: $root.newUser, if: $root.newUser }, openDialog: $root.newUser"></div>
50. 
    
51. <script id="addUserTemplate" type="text/html">
52. 
    
53.     <hgroup class="title">
54.         <h1>@ViewBag.Title.</h1>
55.         <h2>Create a new account.</h2>
56.     </hgroup>
57. 
    
58.     <section class="featured">
59.         <div class="content-wrapper">
60. 
    
61.                     @using (Html.BeginForm())
62.                     {
63.                         @Html.AntiForgeryToken()
64.                         @Html.ValidationSummary()
65.                         <fieldset>
66.                       <legend>Registration Form</legend>
67.                       <ol>
68.                           <li>
69.                               @Html.LabelFor(m => m.UserName)
70.                               @Html.TextBoxFor(m => m.UserName)
71.                           </li>
72.                           @*                 <li>
73.                             @Html.LabelFor(m => m.UserName)<span data-bind="text: $root.isUserNameValid"></span>
74.                             @Html.TextBoxFor(m => m.UserName, new { data_bind = "value: $root.EditUserName, valueUpdate: 'keyup', event: { keyup: $root.DoesUserExist }" })
75.                         </li>
76.                         <li>
77.                              @Html.LabelFor(m => m.Email)
78.                             <span data-bind="text: $root.isEmailValid"></span>
79.                             @Html.TextBoxFor(m => m.Email, new { data_bind = "value: $root.EditEmail, valueUpdate: 'keyup', event: { keyup: $root.DoesUserExist }" })
80.                         </li>
81.                         <li>
82.                              @Html.LabelFor(m => m.Password)
83.                             @Html.TextBoxFor(m => m.Password, new { data_bind = "value: $root.EditPassword, valueUpdate: 'keyup', event: { keyup: $root.DoesUserExist }" })
84.                         </li>
85.                         <li>
86.                              @Html.LabelFor(m => m.ConfirmPassword)
87.                             @Html.TextBoxFor(m => m.ConfirmPassword, new { data_bind = "value: $root.EditConfirmPassword, valueUpdate: 'keyup', event: { keyup: $root.DoesUserExist }" })
88.                         </li>*@
89.                       </ol>
90.                       <input type="submit" value="Register" />
91.                       @*<button data-bind="jqButton: {}, click: $root.accept">Accept</button>*@
92.                       @*<button data-bind="jqButton: {}, click: $root.cancel">Cancel</button>*@
93.                   </fieldset>               
94.                     }      
95. 
    
96. 
    
97.         </div>
98. 
    
99. 
    
100.     </section>
101. 
     
102. </script>
103. 
     
104. 
     
105. </div>
106. 
     
107.                               @section Scripts {
108. 
     
109. 
     
110.                               @Scripts.Render("~/bundles/userVm")
111.                               @Scripts.Render("~/bundles/jqueryval")
112.                           }