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

javascript jquery asp.net-mvc

15,010

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

15,010

Author by

Bob Horn

I'm a software developer that is passionate about elegant, quality code.

Updated on June 04, 2022

Comments

Bob Horn almost 2 years

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

enter image description here

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>

Drewness almost 12 years

Could you post your actual form code then? Are you locked in to using jQ v1.6.2?
Bob Horn almost 12 years

No, I'm not locked into using that version. I posted the entire code form the view.
Bob Horn almost 12 years

I'm not sure how to verify that the file is ok. The validation actually works if I remove the $(document).ready() part.
Hogan almost 12 years

err... not sure what that means, do you leave in $('#vaporizerForm').validate(); and it does not throw an error?
Hogan almost 12 years

just to be clear, you probably won't see the error then if you don't wrap it in a try block.
Bob Horn almost 12 years

Correct. (filler characters here, so I can leave a comment)
Bob Horn almost 12 years

The jquery.validate.js file has 1194 lines it.
Hogan almost 12 years

Removing document ready and putting in the try .. catch works gives no error?
Bob Horn almost 12 years

No error. But the validation isn't working now either. I think I need to step away and come back to this later. I'm probably doing something dumb.
Bob Horn almost 12 years

The script to validate had to go after the form. It's working again. And I'm not getting an alert when catching an error: <script> try { $('#vaporizerForm').validate(); } catch (err) { (err.message); } </script>
Hogan almost 12 years

Strange, but this is 1.6.2, that was pre-promises so the events code was quite different.