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.
