c# - Mvc4 giving me this error 'jQuery.validator.unobtrusive' is null or not an object' -

i have written client side custom validation in separate javascript file named (mycustomvalidations.js)

and code javascript(mycustomvalidations.js) file

   jquery.validator.unobtrusive.adapters.add     ("selectedvaluewithenteredvaluecheck", ["param"], function (options) {         options.rules["selectedvaluewithenteredvaluecheck"] = options.params.param;         options.messages["selectedvaluewithenteredvaluecheck"] = options.message; }); jquery.validator.addmethod("selectedvaluewithenteredvaluecheck", function (value, element, param) {     console.log(value);     console.log(param);     var usrenteredvalue = parseint(param);     var ddlselectedvalue = json.stringify(value);     if(ddlselectedvalue == 'amount')     {         if(usrenteredvalue < 10 || usrenteredvalue > 20)         {                     return false;                 }     }     return true;    }   );  

and view ..

@scripts.render("~/bundles/jquery")// here specifying script files need   change thing @ here @model mvcsampleapplication.models.crossfieldvalidation @{     viewbag.title = "index";     layout = "~/views/shared/_layout.cshtml";     html.enableunobtrusivejavascript(true); }     <h2>index</h2> <script src="@url.content("~/scripts/mycustomvalidations.js")"      type="text/javascript"></script>  @using (html.beginform("postvalues", "crossfieldstxtboxes")) {         @html.validationsummary(false)                  <div class ="editor-field">       @html.textboxfor(m => m.txtcrossfield)         </div>    <div class =".editor-field">        @html.dropdownlistfor(m=> m.selectedvalue , model.items)            </div>  <div class=".editor-field">           <input id="postvalues" type="submit" value="postvalues" />         </div> } 

but getting error @ line

jquery.validator.unobtrusive.adapters.add         ("selectedvaluewithenteredvaluecheck", ["param"], function (options) {             options.rules["selectedvaluewithenteredvaluecheck"] = options.params.param;             options.messages["selectedvaluewithenteredvaluecheck"] = options.message;     }); 

like 'jquery.validator.unobtrusive' null or not object'.

when try run application in ie8 chrome not giving errors client side validation not working in chrome ....

would 1 pls suggest ideas on getting error grateful me ..

many thanks..

modified code :

according link specified in above still getting error:

unhandled exception @ line 2, column 1 in localhost:hostnumber/scripts/mycustomvalidations.js  0x800a138f - microsoft jscript runtime error: 'jquery.validator.unobtrusive' null or not object 

at starting line

    $(function () {   --->   jquery.validator.unobtrusive.adapters.add         ("selectedvaluewithenteredvaluecheck", ["param"], function (options) {             options.rules["selectedvaluewithenteredvaluecheck"] = options.params.param;             options.messages["selectedvaluewithenteredvaluecheck"] = options.message;         });     jquery.validator.addmethod("selectedvaluewithenteredvaluecheck",     function (value, element, param) {         console.log(value);         console.log(param);         if (value != null)             return false;         var usrenteredvalue = parseint(param);         var ddlselectedvalue = json.stringify(value);         if (ddlselectedvalue == 'amount') {             if (usrenteredvalue < 10 || usrenteredvalue > 20) {                 return false;             }         }               return true;     });      }(jquery)); 

maybe 2 javascript references missing.

try this:

<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> <script src="@url.content("~/scripts/mycustomvalidations.js")" type="text/javascript"></script> 

in place of:

<script src="@url.content("~/scripts/mycustomvalidations.js")" type="text/javascript"></script>