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 () каждого поля. Сгруппированные поля найдут своих зависимостей и подтвердят правильность, но при переходе по полям отображается сообщение об ошибке, поскольку пользователь не завершил ввод.

Я попытался добавить событие blur () к набору полей и связать пользовательские события, но не очень удачно.

Для справки, вот что у меня есть для функции 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() Я проверяю, сфокусировано ли какое-либо из сгруппированных полей в настоящее время с классом, который применяется к каждому элементу, который имеет фокус:

   $ 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', чтобы получить к нему доступ без особых хлопот. Таким образом, вы можете безопасно перемещаться по сгруппированным элементам, и форма не будет проверять ошибку, пока последний не будет размыт.