0

我有一个输入表单，我正在使用 jQuery 验证器插件执行客户端验证。基本用法效果很好，除了特定场景：

该表单拆分了地址输入字段，允许街道号、名称、城市、州和邮政编码的单独字段。地址本身是表单的可选输入（用户可以选择不输入地址），但我想确保如果使用这些字段中的任何一个，则会提示用户输入所有字段。

这有效，除非有人输入地址并点击提交，然后决定不输入地址。在这种情况下，理想的行为是，一旦他们输入的输入中的文本被删除，地址组就不会突出显示。

这是当前的情况：

  1. 用户仅在一个输入字段中输入信息，例如街道名称。
  2. 单击提交按钮。
  3. 验证器插件使用提示输入完整地址的错误消息突出显示其他地址输入。
  4. 用户决定不输入地址，并删除之前的输入，例如删除街道名称
  5. 理想情况下：所有其他突出显示的地址输入都未突出显示，并且错误消息被删除。实际上：突出显示的地址输入和消息一直保留到表单提交。

这是演示问题的 javascript 和相应的JSFiddle。

$("form").validate({
    errorClass: 'error',
    errorElement: 'label',
    submitHandler: function() {
        alert("Form submitted");
        return false;
    },
    groups: {
        address: "streetNumber streetName city state zipcode"
    },
    rules: {
        streetNumber: {
            required: {
                depends: function(){
                    return $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        streetName: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        city: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        state: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        zipcode: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != '';
                }
            }
        }
    },
    messages: {
        streetNumber: {required: "Must provide full address"},
        streetName: {required: "Must provide full address"},
        city: {required: "Must provide full address"},
        state: {required: "Must provide full address"},
        zipcode: {required: "Must provide full address"}
    },
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function(error, element) {
        var n = element.attr("name");
        if (n == "streetNumber" || n == "streetName" || n == "city" || n == "state" || n == "zipCode")
                error.insertAfter("#zipcode");
    }
});

除了尝试获得所需的突出显示功能外，我还想知道是否有更聪明的方法来完成不涉及混乱条件语句的“全有或全无”输入组。也许我可以使用表单输入组？

4

3 回答 3

1

您需要在焦点事件上添加一个函数，然后当用户离开该字段时，表单字段将更新。

这很困难，因为您使用的是插件，所以所有调用都在其中发生，但我认为这样的事情会起作用：

var inputs = $('form').find('input');
inputs.focus(function () {
    inputs.each(function () {
       $(this).removeClass('error');
    });
});

只需将其粘贴在验证初始化程序之外的代码中即可。

如果您在验证器之外定义 errorCode 变量，然后在两个函数中使用该 var，那就更好了，如下所示：

var errorClass = 'error';
$('form').validate({
    errorClass: errorClass,
...
...
});

var inputs = $('form').find('input');
inputs.focus(function () {
inputs.each(function () {
    $(this).removeClass(errorClass);
});
});
于 2013-08-16T14:38:24.290 回答
0

您可以尝试在取消突出显示中添加一个方法：类似于

$('.error').removeClass(errorClass);

或定义相关输入并执行

$('.relatedInputs').removeClass(errorClass);

您还可以添加一个 onChange 函数，例如

function(el){
   if(el.val() == ''){
    $('.relatedInputs').removeClass(errorClass);
   } 
}
于 2013-08-16T14:33:00.360 回答
0

通过使用它，我能够获得所需的功能：

onfocusout: function(element) {
    var inputs = $(element).closest('form').find('input, select');
    inputs.each(function() {
        if ($(this).valid())
            $(this).removeClass('error');
    });
}

灵感来自另一篇文章和 DoubleA 的回答。我还没有对它进行彻底的测试，看看它是否会倒退，但到目前为止它似乎有效。

于 2013-08-16T15:30:47.520 回答