Функция обратного вызова после эффекта размытия запускается в jQuery

Question

У меня есть форма, которая проверяется после того, как пользователь «размывает» из поля ввода. Итак:

$("#field1").blur(function() { 

if($(this).val().length>0) { 
    $(this).attr('class', 'completed'); 
} 

}); 

Когда пользователь впервые посещает форму, и до тех пор, все поля не будут «завершены», кнопка отправить скрыт:

$(".submit").hide(); 

Я хочу кнопку представить slideDown сразу все # field1, # ​​field2 ... элементам присваивается «завершенный» класс (любой другой предложенный метод также будет работать).

Я попытался с помощью:

$("#field1").blur(function() { 
    if($(".completed").length == $("input[type='text']").length) { 
     $(".submit").slideDown(1000); 
    } 
}); 

Но это не сработало, как его называли одновременно с предыдущим «размытость» обработчика.

Есть ли способ связать обработчик события с после того, как другой активирован? Может быть, способ добавить функцию обратного вызова для «размытия», которая работает?

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

Answer 1

Ну, вы не обязательно должны установить классы CSS для выполнения такого рода валидаций:

$("#field1").blur(function() { 
    if($("input[type='text']"),filter(isCompleted).length == $("input[type='text']").length) { 
     $(".submit").slideDown(1000); 
    } 
}); 

function isCompleted(i) { 
    return $(this).val().length > 0; 
} 

Другим способом может быть:

$("#field1").blur(function() { 
    // If there are not empty textboxes, slidedown... 
    if($(":text[value='']").length === 0) { 
     $(".submit").slideDown(1000); 
    } 
}); 

Answer 2

Просто сделайте свой чек внутри вашего первого метода .blur, хотя я бы предложил использовать имя класса, чтобы помешать другим входам на странице.

$(".input-field").blur(function() { 
    if($(this).val().length>0) { 
    $(this).addClass('completed'); 
    } 
    setTimeout("isFormValid()", 100); 
}); 

function isFormValid() { 
    if($(".completed").length == $(".input-field").length) { 
    $(".submit").slideDown(1000); 
    } 
} 

Answer 3

Как о чем-то вроде:

$('input').blur(function() { 
    if (this.value.length > 0) 
    $(this).addClass('validationError'); 
    else 
    $(this).removeClass('validationError'); 

    validateForm($(this).parents('form')); 
}); 

funciton validateForm($form) { 
    if ($form.has('.error').length > 0) 
    $('.submit').slideUp(); 
    else 
    $('.submit').slideDown(); 
}