javascript - jQuery exception with document.ready() - Object doesn't support this property or method - Stack Overflow

I'm trying to perform some simple validation, and I'm following some instructions in the book JavaScript & jQuery, The Missing Manual. My code is simply this:

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

And I'm getting this error:

Unhandled exception at line 1039, column 15 in /Scripts/jquery-1.6.2.js

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

If I remove the $(document).ready part, and just do this, it works:

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

Any idea why the $(document).ready() part isn't working?

EDIT -- jQuery call stack and code

EDIT - Entire code in the view

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

I'm trying to perform some simple validation, and I'm following some instructions in the book JavaScript & jQuery, The Missing Manual. My code is simply this:

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

And I'm getting this error:

Unhandled exception at line 1039, column 15 in /Scripts/jquery-1.6.2.js

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

If I remove the $(document).ready part, and just do this, it works:

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

Any idea why the $(document).ready() part isn't working?

EDIT -- jQuery call stack and code

EDIT - Entire code in the view

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

• javascript
• jquery
• asp-mvc

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jul 10, 2012 at 19:51 Bob HornBob Horn 34.3k3636 gold badges120120 silver badges236236 bronze badges 12

• 3 $(document).ready(function() is old legacy stuff use $(function(){}); – Michal Franc Commented Jul 10, 2012 at 19:53
• This book is 9 months old. That's technology for ya. I made the change and I still get the same error. – Bob Horn Commented Jul 10, 2012 at 19:58
• 1 @MichalFranc, what are you talking about? That form of domready bind is still in the core and won't for a long time (if ever) be deprecated, let alone removed. Why did so many people upvote that ment? – davin Commented Jul 10, 2012 at 20:04
• 1 May be a bug in that ancient version of jQuery, or a bug that that version doesn't handle. Try the latest version, 1.7.2. – Quasipickle Commented Jul 10, 2012 at 20:23
• 1 @Bergi I added the call stack screenshots to the question. And Pickle: I could try the latest version; I was just hoping the out-of-the-box MVC stuff would work. – Bob Horn Commented Jul 10, 2012 at 20:42

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 2

I'll go for the obvious answer, are you sure the file at ~/Scripts/jQuery/jquery.validate.js is ok? It is acting like that file is empty, or broken.

To check if the file is ok, navigate to that directory observe the file and open it in the editor, does it have any content.

If you take out the document ready stuff you probably need the following code to see an error:

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

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.

Try with this:

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

-- EDITED --

And put the $(document).ready(.......) in the bottom of your page.

This happens with some versions of IE, when your page is too long.... put it before the body !