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

问题描述 投票:0回答:4
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;
            },
            ''
        );
});

我收到错误“Uncaught TypeError:无法读取未定义的属性‘addMethod’”

_布局是这样的

@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应用程序,无法解决这个问题。

你能帮我吗?

javascript jquery jquery-validate
4个回答
19
投票

您的错误:

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

这只是意味着 JavaScript 无法找到

addMethod
方法,该方法内置于 jQuery Validate 插件中。 jQuery 或 jQuery Validate 未正确包含...找不到文件或 jQuery 已损坏...

你的头部混乱了多个版本的 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。

文档使用 jQuery

.noConflict()


2
投票

添加

jquery.validate.js
文件和
jquery.min.js
(如果尚未包含),然后编写 js 代码以添加 'addMethod' 方法。


2
投票

对我来说,当我将

$.validator.addMethod
方法
$(document).ready(function(){
时,它就被修复了!
并且不需要使用 noConflict() 方法...
如果你使用 Webpack(或像我一样的 Laravel mix)检查编译的 js 的顺序,有时它会将验证器放在 jquery 之前,这会导致此错误


0
投票

类型错误:无法读取未定义的属性(读取“addMethod”)

这个错误是因为你覆盖了js文件造成的 也就是说,在我的例子中,它在我的 chtml 中声明了该文件两次 我有以下文件调用顺序:

jquery-3.1.1.min.js jquery.validate.min.js scripts.bundle.js(模板自己的文件)<-- But this file already has jquery integrated and when loading it internally, jquery is overwritten, therefore, when called this file "scripts.bundle.js" ceases to exist, since the addMethod property will only exist within file "jquery.validate.min.js"

解决方案:

更改文件调用顺序并删除多余文件。

scripts.bundle.js jquery.validate.min.js

此文件被删除: jquery-3.1.1.min.js

在此输入图片描述

© www.soinside.com 2019 - 2024. All rights reserved.