javascript - document.ready() 的 jQuery 异常 - 对象不支持此属性或方法

Question

我正在尝试执行一些简单的验证，并且我正在按照JavaScript & jQuery, The Missing Manual书中的一些说明进行操作。我的代码就是这样的：

<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

<form> form code here </form>

<script>
    $(document).ready(function() {
        $('#vaporizerForm').validate();
    });
</script>

我收到了这个错误：

/Scripts/jquery-1.6.2.js 中第 1039 行第 15 列的未处理异常

0x800a01b6 - Microsoft JScript 运行时错误：对象不支持此属性或方法

如果我删除 $(document).ready 部分，然后这样做，它会起作用：

<script>
        $('#vaporizerForm').validate();
</script>

知道为什么 $(document).ready() 部分不起作用吗？

编辑——jQuery 调用堆栈和代码

编辑 - 视图中的整个代码

@model IEnumerable<DistributorManagement.Models.Vaporizer>

@{
    ViewBag.Title = "Vaporizer";
}
@{
    var grid = new @WebGrid(
        source: Model,
        rowsPerPage: 10);
}

<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $('#vaporizerForm').validate();
    });
</script>

<form action="#" method="post" name="vaporizerForm" id="vaporizerForm">
    <div>
        <label>Manufacturer</label>
        <input name="manufacturer" type="text" class="required" />

        <label>BuildDate</label>
        <input name="buildDate" type="text" class="required date" />

        <label>Rating</label>
        <input name="rating" type="text" class="required number" />
    </div>
    <div>
        <input type="submit" name="submit" value="Submit" />
    </div>
</form>

<br />
<h1>Vaporizer Info</h1>
<div class="webgrid-wrapper">
    <div id="grid">
        @grid.GetHtml(
            tableStyle: "webgrid",
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-rows",
            columns: grid.Columns(
                grid.Column("Id", "ID"),
                grid.Column("Manufacturer"),
                grid.Column("Status"),
                grid.Column("BuildDate", "Build Date"),
                grid.Column("Rating")))
    </div>
</div>

Answer 1

我会去寻找明显的答案，你确定文件没问题~/Scripts/jQuery/jquery.validate.js吗？它的行为就像该文件是空的或损坏的。

要检查文件是否正常，请导航到该目录观察文件并在编辑器中打开它，它是否有任何内容。

如果您取出文档准备好的东西，您可能需要以下代码才能看到错误：

 try {
   $('#vaporizerForm').validate();
 }
 catch ()  {
   alert('still have error');
 }

Answer 2

Put your validation script before the <form>.

<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
  $(document).ready(function(){
    $('#vaporizeForm').validate();
  });
</script>

<form> form code here </form>

Here is a fiddle as an example.

Answer 3

试试这个：

<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>

-- 已编辑 --

并将 $(document).ready(.......) 放在页面底部。

当您的页面太长时，某些版本的 IE 会发生这种情况.... 将其放在正文之前！