javascriptjqueryjquery-validate

Uncaught TypeError: Cannot read property 'addMethod' of undefined


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 error as "Uncaught TypeError: Cannot read property 'addMethod' of undefined"

_layout as 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 write web application in MVC and could not solve this problem.

COuld you help me?


Solution

  • Your error:

    Uncaught TypeError: Cannot read property 'addMethod' of undefined

    It simply means that JavaScript cannot find the addMethod method, which is built into the jQuery Validate plugin. jQuery or jQuery Validate was not included properly... the file(s) cannot be found or jQuery is broken...

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

    Notice how you've define .noConflict() just after this particular version of jQuery is included?

    <!--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 must replace every instance $ just within your validation code.

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

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

    These multiple versions of jQuery need to be resolved, either by removing the duplicates and leaving one version or by properly using .noConflict() after each version is included.

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

    Documentation: Using jQuery .noConflict()