sélectionnez premier champ de formulaire vide

Question

Je checkin une forme de valeurs vides par la méthode suivante

     $("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){ 
     if($(this).val() == ""){ 
     $(this).css("border","solid 1px red").after('Please fill in your '+this.id+''); 
     f.preventDefault(); 
     } 

Maintenant, je veux améliorer la facilité d'utilisation et mettre l'accent sur le premier champ vide, mais c'est le problème. J'ai essayé tous les éléments suivants, mais à chaque fois que le dernier champ vide obtient le focus

     $(this).eq(0).focus(); 
     $(this:first).focus(); 
     $(this:first-child).focus(); 

Comment puis-je régler la mise au point automatiquement au premier champ vide?

Answer 1

Vous devez le placer à la fin, après l'ensemble .filter(), comme ceci:

$("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){ 
    if($(this).val() == ""){ 
    $(this).css("border","solid 1px red").after('Please fill in your '+this.id+''); 
    f.preventDefault(); 
    return true; 
    } 
}).first().focus(); 

De cette façon, vous obtenez le .first() des éléments qui correspondent au filtre. Le return true est important car seuls les éléments sont vides sont laissés dans l'ensemble après le .filter() s'appelle ... actuellement vous l'utilisez comme un appel .each().

La raison pour laquelle il est la mise à la dernière est actuellement this est chaque élément que vous itérer, il est donc concentrer tous, et quel que soit s'exécute dernier est celui à gauche avec l'accent ... plutôt que vous vouloir obtenir l'ensemble de vide et se concentrer le premier de ces éléments.