Javascript 非高亮输入组

我有一个输入表单，我正在使用jqueryvalidator插件执行客户端验证。基本用法非常有效，但有一个特定的场景除外：

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

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

以下是当前的情况：

用户只在一个输入字段中输入信息，例如街道名称

单击提交按钮

validator插件突出显示其他地址输入，并显示一条错误消息，提示输入完整地址

用户决定不输入地址，并删除先前的输入，例如删除街道名称

理想情况下：所有其他高亮显示的地址输入均不高亮显示，错误消息将被删除实际上：突出显示的地址输入和消息保留到表单提交

下面是javascript，它演示了问题和相应的解决方案

---

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

您可以尝试在 不高光： 差不多

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

或定义相关输入并执行以下操作：

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

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

function(el){
   if(el.val() == ''){
    $('.relatedInputs').removeClass(errorClass);
   } 
}

---

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

这很困难，因为您使用的是插件，所以所有调用都发生在插件中，但我认为这样做会奏效：

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

只需在验证初始值设定器之外的代码中插入此代码

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

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

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

---

我能够通过以下方式获得所需的功能：

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

---

这是从另一篇帖子和DoubleA的回答中得到启发的。我还没有对它进行彻底测试，看看它是否会回归任何东西，但到目前为止，它似乎是有效的。

理想情况下，如果您有权访问验证插件，您应该在单击事件中添加此代码，这样您只有在点击提交后才能开始运行此功能。谢谢，我在onfocusout选项中添加了一个变体，它似乎正在工作。很好。很高兴我能帮上忙当我在highlight/unhighlight函数中放置console.log（）时，我注意到当我清除输入时，它们永远不会被调用，因此这可能是问题的一部分。您可能希望您的

unhighlight

回调函数执行与

highlight

回调函数相反的操作。更像这样：

$（element）.removeClass（errorClass）.addClass（validClass）顺便说一句，
高亮显示/取消高亮显示
仅在触发或清除错误时调用。换句话说，当您看到错误消息出现和消失的同时。
onfocusout: function(element) {
    var inputs = $(element).closest('form').find('input, select');
    inputs.each(function() {
        if ($(this).valid())
            $(this).removeClass('error');
    });
}