jQuery - 多場模糊

Question

我正在使用jQuery進行一些表單驗證，驗證每個字段onblur。除非我有分組（依賴）字段，否則一切都很好。我一直在尋找的是一種方法來驗證這些領域只有當他們都被模糊了。它們可以分組爲jQuery對象的集合，也可以作爲包含元素的子元素。

一個例子是生日輸入由三個<選擇>元素：

<fieldset> 
    <label for="bday_month">Birthday:</label> 
    <select name="userBirthday[month]" id="bday_month"> 
     <option value="0">Month</option> 
     <option value="1">January</option> 
     <option value="2">February</option> 
     <option value="3">March</option> 
     ... 
    </select> 
    <select name="userBirthday[day]" id="bday_day"> 
     <option value="0">Day</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     ... 
    </select> 
    <select name="userBirthday[year]" id="bday_year"> 
     <option value="0">Year</option> 
     <option value="1991">1991</option> 
     <option value="1990">1990</option> 
     <option value="1989">1989</option> 
     ... 
    </select> 
</fieldset> 

由於它目前爲，驗證功能被綁定到每個字段的模糊（）事件。成組的字段將找到其依賴項並進行正確驗證，但是，在標記字段時，會顯示錯誤消息，因爲用戶尚未完成輸入。

我已經嘗試將blur（）事件添加到字段集並綁定自定義事件，但都沒有太多運氣。

以供參考，這是我目前有模糊（）函數：提前

fieldBlur = function(e){ 
    // Array of objects w/specific validation functions, arguments, etc. 
    validators = $(this).data('validators'); 

    // Process each validator separately 
    for(key in validators){ 
     validator = validators[key]; 

     $field = validator.$field; 

     // Extracts the value from grouped fields as an array 
     val = valHelper($field); 

     // Call one of the pre-defined validation functions 
     functionResponse = eval(validator.options.functionName + "(val, validator.options.functionArgs);"); 
      if(!functionResponse){ 
       validator.$error.find('.text').text(validator.options.errorMsg); 
       validator.$info.hide(); 
       validator.$error.show(); 

       e.preventDefault(); 
       break; // Only display the first error 
      } else { 
       validator.$error.hide(); 
      }     
     } 
    return true; 
}; 

謝謝，讓我知道更多的代碼/解釋將是有益的。

Answer 1

終於有了一些工作。我會盡我所能在這裏概述它。

1. blur()事件被附加到每個領域
2. 功能關閉的blur()電話setTimeout(function(){ fieldBlurHelper(e); }, 100);
3. 在fieldBlurHelper()

   我檢查，看看是否有任何分組域目前集中W /被應用到每一個班級有焦點的元素：

   $ field.filter（'。hasFocus'）;

4. 如果沒有一個字段具有焦點，我運行驗證

滿（簡體）fieldBlur功能：

fieldBlur = function(e){ 
    fieldBlurHelper = function(e){ 

     // Array of validation data (function name, args, etc.) 
     validators = $(e.target).data('validators');  
      for(key in validators){ 
       validator = validators[key]; 

       // $field contains all the dependent fields (determined on ready()) 
       $field = validator.$field; 

       // If any of the dependent fields have focus, don't bother with validation 
       if($field.filter('.hasFocus').length > 0){ break; } 

       // Extracts value as an array for all the dependent fields (.val() only returns the first) 
       val = valHelper($field); 

       functionResponse = eval(validDater.options.functionName + "(val, validDater.options.functionArgs);"); 
       if(!functionResponse){ 
        console.log('error!'); 
        break; // we only want to show the user one error at a time 
       } else { 
        console.log('valid!'); 
       }     
      } 
     }; 
    // running the function after the timeout allows the fields to lose focus 
    setTimeout(function(){ fieldBlurHelper(e); }, 100); 
}; 

Answer 2

將模糊事件綁定到最後一個字段。您可以使用諸如'fieldset :input:last'之類的選擇器輕鬆訪問它。通過這種方式，您可以安全地選擇分組元素，並且表單在最後一個模糊不清之前不會檢查錯誤。