Strange JQuery validates an error when it is rendered on a server in IE7 ('this.0.form' is null or not an object)

advertisements

I'm trying to implement a custom validation function that requires a group of fields to all be either filled or empty. I used this answer and everything seemed to work when I run it locally. When I put it on a tomcat server and it's being rendered from a servlet I get the following error when run in IE7, in Firefox it works fine at both instances.

'this.0.form' is null or not an object jquery.validate.js line 97

You can find the validate plugin here. The relevant code is below. It goes into the error in the commented line.

 /*
  * Form Validation
  */
 $.validator.addMethod("notEmpty", function (value, element) {
     return value !== "";
 }, "This value cannot be empty");

 $.validator.addMethod("all", function (value, element, options) {

    var row = $(element).closest(options[1]);
    var empties_in_group = $(options[0], row).filter(function() {
        return $(this).val() === "";
    }).length;

    //Either all have to be empty or filled
    var valid = empties_in_group === 0 || empties_in_group === $(options[0], row).length;

    if (!$(element).data('reval')) {
        var fields = $(options[0], row);
        fields.data('reval', true).valid(); //Error happens in this line
        fields.data('reval', false);
    }
    return valid;
 }, "Either none or all fields in this section have to be filled");

$.validator.addClassRules({
    percentage: {
        digits: true,
        min: 0,
        max: 100
    },
    cpu_util:   {all: [".cpu_util", 'tr']},
    cpu_load:   {all: [".cpu_load", 'tr']},
    disk_used:  {all: [".disk_used", 'tr']},
    disk_cons:  {all: [".disk_cons", 'tr']},
    time_field: {all: [".time_field", 'li']},
    log_msgs:   {all: [".log_msgs", 'li']},
    log_unchng: {all: [".log_unchng", 'td']},
    log_ex:     {all: [".log_ex", 'td']},
    mem_free:   {all: [".mem_free", 'tr']},
    mem_used:   {all: [".mem_used", 'tr']},
    cpu_mem:    {all: [".cpu_mem", 'tr']},
    cpu_util:   {all: [".cpu_util", 'tr']},
    swap:       {all: [".swap", 'tr']}
});

Any ideas?

EDIT: The files are loaded in the header:

<head>
  <link rel="stylesheet" type="text/css" href="<rootfolder>/css/style.css"/>
  <script type="text/javascript" src="<rootfolder>/js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="<rootfolder>/js/jquery.timebox.js"></script>
  <script type="text/javascript" src="<rootfolder>/js/jquery.validate.js"></script>
  <script type="text/javascript" src="<rootfolder>/js/jquery.qtip.min.js"></script>
  <script type="text/javascript" src="<rootfolder>/js/script.js"></script>
</head>

Javascript in script js is loaded like this:

$(document).ready(function() {
  <JQUERY AND JAVASCRIPT THINGS>
});

EDIT 2: I also tried with javascript at the bottom of body and it still has the same error.


jquery isn't rendered server-side. a raw javascript file gets pushed through to the client, and the client browser executes whatever code you wrote, all without the help of a server.

so unless tomcat is actually rewriting the code before it sends it through to the client, I seriously doubt it's because of a server-side issue.