Question

我正在使用jQuery进行一些表单验证，验证每个字段onblur。一切都很好，除非我有分组（依赖）字段。我正在寻找的是一种只有在所有这些字段都被模糊后才能验证这些字段的方法。它们可以分组为jQuery对象的集合，也可以作为包含元素的子集。

一个例子是由三个＆lt;选择＆gt;元素：

<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（）事件相关联。分组字段将找到它们的依赖项并正确验证，但是当在字段中进行选项卡时，会显示错误消息，因为用户尚未完成输入。

我尝试将blur（）事件添加到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

终于有了一些工作。我会尽力在这里概述一下。

blur()事件附加到每个字段
blur()来电setTimeout(function(){ fieldBlurHelper(e); }, 100);

fieldBlurHelper()

我检查当前是否有任何分组字段聚焦于一个应用于每个具有焦点的元素的类：

$ field.filter（” hasFocus。）;
如果没有任何字段具有焦点，我运行验证器

完整（简化）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'这样的选择器来轻松访问它。这样你就可以安全地浏览分组元素，并且在最后一个模糊之前，表格不会检查错误。

jQuery - 多场模糊

2 个答案: