Question

I’m using this jQuery validation plugin and getting the famous:

$(“#Form”).validate is not a function

when trying to validate in Firebug (and equivalent messages in all other browsers).

This would imply that I’m attempting to call it before both jquery-1.4.2.js and jquery.validate.js are loaded. I’ve used Fiddler to show these files are being requested prior to calling validate() so in the absence of a better method I can only assume these two files are completely loaded within the browser.

Is there anywhere else I should look in order to solve this? If the scripts are requested first they should be also loaded in that order? Is there a way to find out?

I’m currently of the opinion there is something else in the plugin causing this (config etc). I’ve searched all over but non of the solutions seem to apply to me.

Any ideas where to look?

My jQuery is:

$(document).ready(function () {
    console.log("loaded");
    $("#Form").validate({
        rules: {
            container_0$centre_0$txtFirstName: { required: true }
        }
    });
})

and the form is:

<form method="post" action="/url" id="Form" enctype="multipart/form-data">

 <div class="ctrlholder">
    <label for="firstname">First Name</label>
    <input name="container_0$centre_0$txtFirstName" type="text" id="txtFirstName" class="required" /><em>*</em>
    <div id="errFirstName" class="error" style="display:none;">Please enter your first name</div>
  </div>
</form>

There are simplified versions of the code.

Answer 1

It appears that jquery.tools.min.js (which appears to be this) was causing the problem. On removing this I can validate as usual.

I would investigate further but I only have the minified version of the script although I’d hazard a guess it’s because it has its own validation, likely causing a method name overlap.

This will be an excellent future resource for this edge case.