未捕获的类型错误：无法读取未定义的属性“addMethod”答案

【问题标题】：Uncaught TypeError: Cannot read property 'addMethod' of undefined未捕获的类型错误：无法读取未定义的属性“addMethod”
【发布时间】：2014-11-30 07:54:45
【问题描述】：

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;
            },
            ''
        );
});

我收到错误为“未捕获的类型错误：无法读取未定义的属性 'addMethod'”

_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 -->

我用 MVC 编写 Web 应用程序，但无法解决这个问题。

你能帮帮我吗？

【问题讨论】：

您可能缺少定义 $.validator 的插件...
插件叫什么名字？
貌似你没有收录jquery.validate.js
我的 _Layout 有 jquery.validate.js 脚本
是的。我买了模板并扩展了一些功能。

标签： javascript jquery jquery-validate

【解决方案1】：

你的错误：

未捕获的类型错误：无法读取未定义的属性“addMethod”

这只是意味着 JavaScript 找不到 addMethod 方法，该方法内置在 jQuery Validate 插件中。未正确包含 jQuery 或 jQuery Validate...找不到文件或 jQuery 已损坏...

您的 head 部分与多个版本的 jQuery 和 .noConflict() 应用不一致。

注意在包含这个特定版本的 jQuery 之后，您是如何定义 .noConflict() 的吗？

<!--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>

因此，对于验证部分，名称 jQuery_1_7_0 必须替换验证代码中的每个实例 $。

jQuery_1_7_0(document).ready(function () {

    jQuery_1_7_0.validator.addMethod( ....

我只指出了一个例子。您还在验证部分上方包含了一个没有.noConflict() 的jQuery 版本。

需要解决这些多个 jQuery 版本，方法是删除重复项并保留一个版本，或者在包含每个版本后正确使用 .noConflict()。

IMO，最好只使用一个版本的 jQuery。

文档：Using jQuery .noConflict()

【讨论】：

【解决方案2】：

添加jquery.validate.js文件和jquery.min.js如果你没有包含然后编写你的js代码添加'addMethod'方法。

【讨论】：

【解决方案3】：

对我来说，当我将$.validator.addMethod 方法退出 $(document).ready(function(){ 时，它已修复！
并且没有必要使用 noConflict() 方法...
如果您使用 Webpack（或像我一样的 Laravel 混合）检查编译 js 的顺序，有时它会将验证器放在 jquery 之前，这会导致此错误

【讨论】：