javascript - MVC immediate validation is not triggering? -

i have form in mvc 5. have 3 drop-downs on form required. when submit form, error message appears. problem that, when select value drop-down, error messages still show. , if submit button, required error message disappears.

the main problem immediate validation not working. scenario occurs when first submit form without selection , select drop down value. error still show. here form.

@using (html.beginform()) {  @html.antiforgerytoken() @html.hiddenfor(model => model.processid)   <div class="row">     <div class="col-sm-6">         @html.validationsummary(true, "", new { @class = "text-danger" })     </div> </div>   <div class="row">     <div class="col-sm-12 bgnmrgn">         <div class="col-sm-12">             <h3>@resources.basicinformtion</h3>         </div>           <div class="form-group col-sm-2">             <label class="control-label">intiqal type</label>             @html.dropdownlistfor(model => model.intiqal.intiqaltypeid, new selectlist(model.intiqaltypes, "intiqaltypeid", "intiqaltypename"), resources.select, new { id = "intiqaltypes", class = "form-control" })             @html.validationmessagefor(model => model.intiqal.intiqaltypeid, "", new { id = "", @class = "text-danger" })            </div>         <div class="form-group col-sm-2">             <label class="control-label">source</label>             @html.dropdownlistfor(model => model.intiqal.processinitiationtypeid, new selectlist(new list<processinitiationtype>             (), "processinitiationtypeid", "processinitiationtypename"), resources.select, new { id = "processinitiationtypes", class = "form-control" })             @html.validationmessagefor(model => model.intiqal.processinitiationtypeid, "", new { id = "", @class = "text-danger" })         </div>          <div class="form-group col-sm-2 hidden" id="shamilatselection">             <label class="control-label">shamilat</label>             @html.dropdownlistfor(model => model.intiqal.shamilat, new selectlist(model.shamilat, "key", "value"), resources.select, new { id = "shamilat", class = "form-control " })             @html.validationmessagefor(model => model.intiqal.shamilat, "", new { @class = "text-danger" })         </div>     </div> </div>  //other stuff including submit button     } 

what's problem?

edited -- here script order

<script src="/scripts/jquery-2.2.3.js"></script> <script src="/scripts/jquery-ui-1.11.4.min.js"></script>  <script src="/scripts/jquery.unobtrusive-ajax.js"></script> <script src="/scripts/jquery.validate.js"></script> <script src="/scripts/jquery.validate.unobtrusive.js"></script> 

this issue seem wrestle in every single mvc project create.

the problem, presumably, either not loading (or loading in wrong order, etc) jquery-validation-unobtrusive.js (or .min.js) form.

i typically make sure added scriptbundle package unobtrusive validation works on every page.

in many cases, have been forced uninstall-package , install-package again jquery unobtrusive validation package.

aside that, on pages forms throw 1 of these @ bottom:

@section scripts  { @scripts.render("~/bundles/jqueryval") } 

and ensure web.config contains following:

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