jQuery validate() MVC 4 Uncaught Type Error Object [object Object] has no method 'validate'

Question

I'm making a a MVC 4 application. I'm trying to apply some client side validation using jQuery validate. I keep receiving "Uncaught Type Error: Object [Object object] has no method 'validate'". I've tried using the url links instead of the scripts in my project. I've checked the scripts, they do exist. I've dragged and dropped the scripts into the file to ensure the path is properly specified. I've tried a ton of other things, but just can't figure out why I'm receiving this error.

Here is my rendered page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Create</title>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>


<h2>Create Question For d</h2>

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function () {

    //form validation
    $('#myForm').validate();

    $(':input').rules("add", {
        required: true
    });


    //submit form using jquery
    //$('#myForm').submit(function (event) {

    //    //url-encode the form data
    //    var formData = $(this).serialize();

    //    //post the data to the controller
    //    $.post(
    //        'AddQuestion',
    //        formData
    //        );
    //    event.preventDefault();
    //    handleSuccess();
    //});

    //$(':input').not(':button, :submit, :reset, :hidden').val('');
    //$(':checkbox').attr('checked', false);


    $("input:checkbox").click(function () {
        if ($(this).is(":checked") === true) {
            $('input:checkbox').attr("checked", false);
            $(this).attr("checked", true);
        } else {
            $(this).is(":checked", false);
        }
    });


    //clears form on page load (called from submit function)
    function handleSuccess() {         
        $(':input').not(':button, :submit, :reset, :hidden').val('');
        $(':checkbox').attr('checked', false);
    }
});
</script>


<form action="/Test/AddQuestion" id="myForm" method="post">    <fieldset>
    <legend>Question</legend>
    <!-- input box for question -->
    <input type="text" name="question.query" />

    <h3>Answers</h3>


    <input type="text" name="answer[0].option" /> <input type="checkbox"    name="answer[0].isCorrect" value="true" /> <br />
    <input type="text" name="answer[1].option" /> <input type="checkbox" name="answer[1].isCorrect" value="true"/> <br />
    <input type="text" name="answer[2].option" /> <input type="checkbox" name="answer[2].isCorrect" value="true"/> <br />
    <input type="text" name="answer[3].option" /> <input type="checkbox" name="answer[3].isCorrect" value="true"/> <br />
    <!-- Passes testId & testName to AddQuestion Controller Action -->
    <div>
        <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="test_Id" name="test.Id" type="hidden" value="222" />
        <input id="test_name" name="test.name" type="hidden" value="d" />
    </div>

    <p>
        <input type="submit" value="Add Question to Test" />
    </p>
</fieldset>
</form>
<div>
<a href="/Test">Back to List</a>
</div>


<script src="/Scripts/jquery-1.7.1.js"></script>


</body>
</html>

Still have not found a solution. Have tried using hosted links for tag src. Tried taking tags out, one at a time, putting them in different orders, putting them in the master layout page, etc... really stumped on this one. Sure it's sometime unbelievably simple.

As explained on the first version of this question that you deleted, you only need to include jQuery one time. If you include it after you include the plugins, you will break everything. — Sparky
– Sparky, Commented Mar 4, 2013 at 6:19
didn't mean to delete, was trying to add to it. Very long day. sry — nycfdtd
– nycfdtd, Commented Mar 4, 2013 at 6:41

bipen · Accepted Answer · 2013-03-04 06:22:16Z

2

figured..you have two same script loaded in the page..jquery and jquery.min.. which is not necessary at all.. just load min.js and that will be fine... and yes t is always recommended to load all your js file on <head> and not in <body>...

<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>Create</title>
 <link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
..........

answered Mar 4, 2013 at 6:22

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nycfdtd Over a year ago

I must be missing something really obvious. I don't see two of the same scripts. I see a modernizr, jquery min, jquery validate, and jquery unobtrusive validate. Thank you for any help. I really appreciate it. been wrestling with this for half a day now. The web hasn't yielded an answer yet.

nycfdtd Over a year ago

Oh wow! I see, it's at the bottom of the page. MVC had that in there be default, being loaded in the bottom of body. Thank you so much! Life saver! =)

bipen Over a year ago

your other script is at the end... before </body> here <script src="/Scripts/jquery-1.7.1.js"></script>

Collectives™ on Stack Overflow

jQuery validate() MVC 4 Uncaught Type Error Object [object Object] has no method 'validate'

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related