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'之类的选择器轻松访问它。通过这种方式，您可以安全地选择分组元素，并且表单在最后一个模糊不清之前不会检查错误。