1

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.

Community
  • 1
  • 1
mck
  • 2,040
  • 3
  • 19
  • 29
  • Which line is 97? If all your criteria is empty or not, then this is overkill. Do something simple with jQuery you can get all input elements in a form and just iterate over them attaching a blur listener. On Blur, validate the value depending on a css class assigned. – Ali Aug 16 '11 at 08:41
  • @Ali No, I have a big form. It's inside a table, because you're basically editing tabular data. Certain groups of fields have the property that you have to fill either all of them or none of them. I mark them with different classes: cpu_util, cpu_load, etc. – mck Aug 16 '11 at 08:48
  • look inside the `valid()` method. If they are fetching a form using this.0.form to fetch the first form in the page, then try replacing it with `document.forms[0]` other than that, not much else to recommend. – Ali Aug 16 '11 at 09:19

3 Answers3

0

I have been testing my MVC application in IE 8, latest FF and Chrome and everything was working fine. When I tried running IE with IE 7 standards a lot was not working, including some jquery validations.

The problem was exactly what was stated in the error message, the form was null.

What was happening in my case was that I was validating the form like this

var form = $("#divThatWrapsTheForm #Form"); //changed this line

form.removeData("validator");
$.validator.unobtrusive.parse(form);


if (!$(form).valid()) {
    return;
}

Apparently, IE 7 did not like the way I was defining the form variable, so I fixed it like this:

var form = $("#divThatWrapsTheForm").children("#Form"); //to this

form.removeData("validator");
$.validator.unobtrusive.parse(form);


if (!$(form).valid()) {
    return;
}

Hope this helps.

Mauricio Ramalho
  • 849
  • 1
  • 8
  • 15
0

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.

user85569
  • 394
  • 3
  • 10
  • Yeah, I know that, but I thought it may be relevant, as it works without any problems when I download the page to my computer and run it locally. – mck Aug 16 '11 at 08:42
  • could you perhaps update the original post with how you're including the javascript into your form? if you're able to download the file and run it successfully locally, I'm pretty sure it's a code issue in terms of how you include the file rather than something wrong with the server – user85569 Aug 17 '11 at 09:06
0

If all you need to do is make sure that required fields are filled. Then the code is very simple, leave out the complicated plugin. All you need to do is something like so:

Note: Simple version all it does it make sure there is input or not.

function validateForm() {
    var req = $('.required');
    $.each(req, function(index, value){
        if($(value).val() != null &&  $(value).val().length < 1){
            markError($(value), "Cannot be empty");
            error=true;
        } else {
            unmarkError($(value));
        }
    });

    function markError(ele, msg) {
        $(ele).prev().addClass("alert");
        var msgSpan = $(ele).next('span.errorMsg');
        if(msgSpan.length > 0) {
            $(msgSpan).text(msg);
        } else {
            $(ele).after("<span class='errorMsg'>"+msg+"</span>");
        }
    }

    function unmarkError(ele) {
        $(ele).prev().removeClass("alert");
        $(ele).next('span.errorMsg').remove();
    }
}

I get all fields with the CSS class required and check their value. I execute this code on form submit:

<form .... onSubmit="return validateForm()" >
Ali
  • 12,354
  • 9
  • 54
  • 83
  • No, I have a big form. It's inside a table, because you're basically editing tabular data. Certain groups of fields have the property that you have to fill either all of them or none of them. I mark them with different classes: cpu_util, cpu_load, etc. – mck Aug 16 '11 at 08:47
  • As said, very simple example, what you can do is change your selector to `$("div.required input, div.required textarea, div.required select")` and when iterating over the fields and set a boolean `textFound` and `textNotFound` each time. If both are true, you throw a validation error. – Ali Aug 16 '11 at 08:50
  • You misunderstand. This whole group of fields (for example with class .cpu_load) can stay empty, but if you fill one of the fields, you have to fill out the rest as well. Plus some fields have many other validation rules, for example they can only be numbers, between 0 and 100. That's why I'm using the validate plugin it makes a lot of things easier. – mck Aug 16 '11 at 08:53
  • I also need it to be realtime. So on blur I need to update all fields. – mck Aug 16 '11 at 09:02