Функция обратного вызова после эффекта размытия запускается в 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();
}