在IE7中的服务器上呈现时,奇怪的JQuery验证错误('this.0.form'为null或不是对象)

时间:2011-08-16 08:36:16

标签: jquery tomcat servlets jquery-validate

我正在尝试实现一个自定义验证函数,该函数需要一组字段全部填充或为空。我使用this answer,一切似乎都有效 我在本地运行它。当我把它放在一个tomcat服务器上并且它是从一个servlet呈现时,我在IE7中运行时会出现以下错误,在Firefox中它在两个实例都可以正常工作。

  

'this.0.form'为null或不是对象   jquery.validate.js第97行

您可以找到验证插件here。相关代码如下。它会进入注释行中的错误。

 /*
  * 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']}
});

有什么想法吗?

编辑:文件加载在标题中:

<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>

脚本js中的Javascript加载如下:

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

编辑2:我也尝试使用javascript在body的底部,它仍然有相同的错误。

3 个答案:

答案 0 :(得分:0)

jquery不是在服务器端呈现的。一个原始的javascript文件被推送到客户端,客户端浏览器执行你编写的任何代码,所有这些都没有服务器的帮助。

因此,除非tomcat在将代码发送到客户端之前实际重写代码,否则我很怀疑这是因为服务器端问题。

答案 1 :(得分:0)

如果您需要做的就是确保填写必填字段。然后代码非常简单,省略了复杂的插件。你需要做的就是这样:

注意:简单版本确保输入与否。

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();
    }
}

我使用CSS类required获取所有字段并检查它们的值。我在表单提交上执行此代码:

<form .... onSubmit="return validateForm()" >

答案 2 :(得分:0)

我一直在IE 8中测试我的MVC应用程序,最新的FF和Chrome,一切都运行良好。当我尝试使用IE 7标准运行IE时,很多都没有用,包括一些jquery验证。

问题正是错误消息中所述,表单为空。

在我的案例中发生的事情是我正在验证这样的表格

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

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


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

显然,IE 7不喜欢我定义表单变量的方式,所以我修改了这样:

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

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


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

希望这有帮助。