Unighighing輸入組

Question

我有一個輸入表單，我正在用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"); 
    } 
}); 

除了試圖讓亮點所需的功能，我也想知道是否有完成，不涉及條件語句的亂七八糟的「全有或全無」輸入組一個更聰明的方法。也許我可以使用表單輸入組？

Answer 1

您需要在焦點e上添加一個函數發泄，然後當用戶離開該字段時，表單字段將更新。

這是困難的，因爲你使用的是插件，所以所有的呼叫都內發生這種情況，但我認爲這樣的事情會工作：

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

Answer 2

你可以嘗試在 unhighlight添加一個方法： 像

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

或定義相關的投入和做

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

，你還可以添加一個onchange功能像

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

Answer 3

我能夠用它來獲取所需的功能：

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

從另一篇文章和DoubleA的答案中得到靈感。我沒有對它進行徹底測試，看它是否會倒退，但到目前爲止它似乎工作。