Uncaught TypeError: Cannot read the 'addMethod' property from undefined

Question

jQuery(document).ready(function () { //alert("HIQ"); $('.mySelectCalendar').datepicker({ firstDay: 1, dateFormat: "dd.mm.yy" }); $.validator.addMethod( 'date', function (value, element, params) { if (this.optional(element)) { return true; }; var result = false; try { $.datepicker.parseDate('dd.mm.yy', value); result = true; } catch (err) { result = false; } return result; }, '' ); }); 

I get an error like "Uncaught TypeError: Can't read property" addMethod "from undefined"

_layout like this

@ ViewBag.Title

 <!-- jQuery --> <script src="~/App_Themes/ThemeBlue/assets/js/jquery203.js"></script> <script src="~/App_Themes/ThemeBlue/assets/js/jquery.min.js"></script> <script type="text/javascript"> var jQuery_2_0_3 = $.noConflict(true); </script> <!-- Picker UI--> <script src="~/App_Themes/ThemeBlue/assets/js/jquery-ui.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <!--Validation --> <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <link href="~/App_Themes/ThemeBlue/css/validation.css" rel="stylesheet" /> <script type="text/javascript"> var jQuery_1_7_0 = $.noConflict(true); </script> <!-- Bootstrap --> <link href="~/App_Themes/ThemeBlue/dist/css/bootstrap.css" rel="stylesheet" media="screen" /> <link href="~/App_Themes/ThemeBlue/assets/css/custom.css" rel="stylesheet" media="screen" /> <!-- bin/jquery.slider.min.js --> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jshashtable-2.1_src.js"></script> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.numberformatter-1.2.3.js"></script> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/tmpl.js"></script> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.dependClass-0.1.js"></script> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/draggable-0.1.js"></script> <script type="text/javascript" src="~/App_Themes/ThemeBlue/plugins/jslider/js/jquery.slider.js"></script> <!-- Javascript --> <script src="~/App_Themes/ThemeBlue/assets/js/initialize-loginpage.js"></script> <script src="~/App_Themes/ThemeBlue/assets/js/jquery.easing.js"></script> <script src="~/App_Themes/ThemeBlue/assets/js/customTravel.js"></script> <!-- Load Animo --> <script src="~/App_Themes/ThemeBlue/plugins/animo/animo.js"></script> <script src="~/App_Themes/ThemeBlue/dist/js/bootstrap.min.js"></script> <!-- Carousel --> <link href="~/App_Themes/ThemeBlue/examples/carousel/carousel.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <script src="assets/js/respond.min.js"></script> <![endif]--> <!-- Fonts --> <link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,400,300,300italic' rel='stylesheet' type='text/css'> <!-- Font-Awesome --> <link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/assets/css/font-awesome.css" media="screen" /> <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/assets/css/font-awesome-ie7.css" media="screen" /><![endif]--> <!-- REVOLUTION BANNER CSS SETTINGS --> <link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/css/fullwidth.css" media="screen" /> <link rel="stylesheet" type="text/css" href="~/App_Themes/ThemeBlue/rs-plugin/css/settings2.css" media="screen" /> <!-- Picker UI--> <link rel="stylesheet" href="~/App_Themes/ThemeBlue/assets/css/jquery-ui.css" /> <!-- bin/jquery.slider.min.css --> <link rel="stylesheet" href="~/App_Themes/ThemeBlue/plugins/jslider/css/jslider.css" type="text/css"> <link rel="stylesheet" href="~/App_Themes/ThemeBlue/plugins/jslider/css/jslider.round.css" type="text/css"> <!-- Animo css--> <link href="~/App_Themes/ThemeBlue/plugins/animo/animate_animo.css" rel="stylesheet" media="screen"> <!-- end --> 

I am writing a web application in MVC and cannot solve this problem.

COOLd will you help me?

Answer 1

Your mistake:

Uncaught TypeError: Cannot read the 'addMethod' property from undefined

It just means that JavaScript cannot find the addMethod method that is built into the jQuery Validate plugin. jQuery or jQuery Validate were not included properly ... the file cannot be found or jQuery is not working ...

Your head section is a mess with several versions of jQuery and .noConflict() applied inconsistently.

Notice how you defined .noConflict() right after you enable this particular version of jQuery?

 <!--Validation --> <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.validate.js"></script> .... <script type="text/javascript"> var jQuery_1_7_0 = $.noConflict(true); // <- this </script> 

So, for the validation section, the name jQuery_1_7_0 should replace each instance of $ only inside your validation code.

 jQuery_1_7_0(document).ready(function () { jQuery_1_7_0.validator.addMethod( .... 

I just pointed out one example. You also included a jQuery version without .noConflict() just above your validation section.

These multiple versions of jQuery need to be .noConflict() removing duplicates and leaving one version or using .noConflict() correctly after each version is included.

IMO, it is best to use only one version of jQuery.

Documentation : Using jQuery .noConflict()