jquery - MVC 3 Client Validation works intermittently -

update: if set @ least 1 breakpoint in javascript, validation start works, without not work

update: adding jquery tag may connected validation plugin

i have mvc 3 version, system.web.mvc product version is: 3.0.20105.0 modified on 5th of jan 2011 - think that's latest.

i’ve notice client validation not working suppose in application creating, i’ve made quick test.

i’ve created basic mvc 3 application using internet application template.

i’ve added test controller:

using system.web.mvc; using mvcapplication3.models;  namespace mvcapplication3.controllers {     public class testcontroller : controller     {         public actionresult index()         {             return view();         }          public actionresult create()         {             sample model = new sample();              return view(model);         }          [httppost]         public actionresult create(sample model)         {             if(!modelstate.isvalid)             {                 return view();             }              return redirecttoaction("display");         }          public actionresult display()         {             sample model = new sample();             model.age = 10;             model.cardnumber = "1324234";             model.email = "somedata@test.com";             model.title = "hahah";              return view(model);         }     } } 

model:

using system.componentmodel.dataannotations;  namespace mvcapplication3.models {     public class sample     {         [required]         public string title { get; set; }          [required]         public string email { get; set; }          [required]         [range(4, 120, errormessage = "oi! common!")]         public short age { get; set; }          [required]         public string cardnumber { get; set; }     } } 

and 3 views:

create:

@model mvcapplication3.models.sample  @{     viewbag.title = "create";     layout = "~/views/shared/_layout.cshtml"; }  <h2>create</h2>  <script src="@url.content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  @*@{ html.enableclientvalidation(); }*@  @using (html.beginform()) {     @html.validationsummary(false)     <fieldset>         <legend>sample</legend>          <div class="editor-label">             @html.labelfor(model => model.title)         </div>         <div class="editor-field">             @html.editorfor(model => model.title)             @html.validationmessagefor(model => model.title)         </div>          <div class="editor-label">             @html.labelfor(model => model.email)         </div>         <div class="editor-field">             @html.editorfor(model => model.email)             @html.validationmessagefor(model => model.email)         </div>          <div class="editor-label">             @html.labelfor(model => model.age)         </div>         <div class="editor-field">             @html.editorfor(model => model.age)             @html.validationmessagefor(model => model.age)         </div>          <div class="editor-label">             @html.labelfor(model => model.cardnumber)         </div>         <div class="editor-field">             @html.editorfor(model => model.cardnumber)             @html.validationmessagefor(model => model.cardnumber)         </div>          <p>             <input type="submit" value="create" />         </p>     </fieldset>      @*<fieldset>          @html.editorformodel()          <p>             <input type="submit" value="create" />         </p>      </fieldset>    *@            }  <div>     @html.actionlink("back list", "index") </div> 

display:

@model mvcapplication3.models.sample  @{     viewbag.title = "display";     layout = "~/views/shared/_layout.cshtml"; }  <h2>display</h2>  <fieldset>     <legend>sample</legend>      <div class="display-label">title</div>     <div class="display-field">@model.title</div>      <div class="display-label">email</div>     <div class="display-field">@model.email</div>      <div class="display-label">age</div>     <div class="display-field">@model.age</div>      <div class="display-label">cardnumber</div>     <div class="display-field">@model.cardnumber</div> </fieldset> <p>     @html.actionlink("back list", "index") </p> 

index:

@{     viewbag.title = "index";     layout = "~/views/shared/_layout.cshtml"; }  <h2>index</h2>  <p>     @html.actionlink("create", "create") </p>  <p>     @html.actionlink("display", "display") </p> 

everything default here – create controller, addview controller action model specified proper scaffold template , using provided layout in sample application.

when go /test/create client validation in cases works title , age fields, after clicking create works fields (create not goes server).

however in cases (after build) title validation not working , email is, or cardnumber or title , cardnumber email not. never validation working before clicking create.

i’ve tried creating form html.editorformodel enforce client validation before beginform:

@{ html.enableclientvalidation(); } 

i’m providing source code sample on dropbox – maybe our dev env broken :/ i’ve done tests on ie 8 , chrome 10 beta.

just in case, in web config validation scripts enabled:

<appsettings>   <add key="clientvalidationenabled" value="true"/>    <add key="unobtrusivejavascriptenabled" value="true"/>  </appsettings> 

so questions are

is there way ensure client validation work supposed work , not intermittently?

is desired behavior , i'm missing in configuration/implementation?

update: if set @ least 1 breakpoint in javascript, validation start works, without not work

update: adding jquery tag may connected validation plugin

when unobtrusive validation used - realtime client-side validation works after first submit. before first client-side validation of form executed (just click submit) realtime validation of fields not initialized , not working.