La fonction de rappel après un effet de flou est déclenchée dans jquery

Question

J'ai un formulaire qui est validé une fois que l'utilisateur est "flouté" d'un champ de saisie. Alors:

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

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

}); 

Lorsque l'utilisateur visite d'abord la forme, et jusqu'à tous les champs sont « terminés », ce bouton est caché:

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

Je veux le bouton soumettre à slideDown une fois tous les # Les éléments field1, # ​​field2 ... ont été assignés à une classe "completed" (toute autre méthode suggérée fonctionnera aussi).

J'ai essayé d'utiliser:

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

Mais cela n'a pas fonctionné comme on l'appelait en même temps que l'ancien gestionnaire « flou ».

Existe-t-il une méthode pour lier un gestionnaire d'événements à après un autre s'est déclenché? Peut-être un moyen d'ajouter une fonction de rappel pour "flouter" qui fonctionne?

J'apprécierais tous les types de solution (pas nécessairement quelque chose comme je l'ai présenté).

Answer 1

Eh bien, vous ne devez pas nécessairement définir des classes CSS pour faire ce genre de validation:

$("#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; 
} 

Une autre façon pourrait être:

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

Answer 2

Faites simplement votre vérification dans votre première méthode .blur, bien que je suggère d'utiliser un nom de classe pour empêcher toute autre entrée sur la page d'interférer.

$(".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

Que diriez-vous quelque chose comme:

$('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(); 
}