Problème de validation JQuery

Question

Je fais une validation de champ en utilisant jquery pour vérifier si elle est vide. Si c'est le cas, je veux afficher un message, puis recentrer sur le champ afin que l'utilisateur puisse entrer certaines données. Code:

$('#fieldId').blur(function() { 
    var fieldValue = $(this).val(); 
    if(fieldValue == null || fieldValue.length == 0) { 
     $(this).addClass('error'); 
     // show error message 
     $('#errorDivId') 
      .text('You must enter a value in this field') 
      .show(); 
     $(this).focus(); 
    } 
    else { 
     if ($(this).is('.error')) { 
      $(this.removeClass('error'); 
      $('#errorDivId').hide() 
     } 
    } 
}); 

Cela fonctionne en quelque sorte mais cela déplace le curseur sur le champ suivant et non celui sur lequel je me suis recentré.

Answer 1

Vous pouvez essayer ceci:

$('#fieldId').blur(function(evt) { 
    var fieldValue = $(this).val(); 
    if(fieldValue == null || fieldValue.length == 0) { 
    $(this).addClass('error'); 
    // show error message 
    $('#errorDivId') 
     .text('You must enter a value in this field') 
     .show(); 
    this.focus(); 
    evt.preventDefault(); 
    } 
    else { 
    if ($(this).is('.error')) { 
     $(this.removeClass('error'); 
     $('#errorDivId').hide() 
    } 
    } 
}); 

Cependant cela ne peut pas résoudre complètement le problème, car certains navigateurs pourraient être confondus. Comme alternative, envelopper votre « focus » appeler comme un délai d'attente et l'exécuter après la fin de l'événement en cours:

var self = this; 
    setTimeout(function() { self.focus(); }, 1); 

Il est un peu-un hack mais il devrait également fonctionner.

modifier — @Gus a raison sur laquelle "focus()" pour appeler

Answer 2

L'événement blur est déclenché lors d'un changement de focus (lorsque le contrôle que vous validez perd le focus). Cela pourrait provoquer un comportement étrange si vous essayez de modifier le focus pendant qu'il est déjà en train de changer. Au lieu de blur, essayez d'attacher la validation à l'événement change.

De même, il n'est pas nécessaire d'appeler la version de mise au point de jQuery: $(this).focus(), vous pouvez simplement appeler this.focus().

$('#fieldId').change(function() { 
    var fieldValue = $(this).val(); 
    if(fieldValue == null || fieldValue.length == 0) { 
     $(this).addClass('error'); 
     // show error message 
     $('#errorDivId').text('You must enter a value in this field').show(); 
     this.focus(); 
    } else { 
     if ($(this).is('.error')) { 
      $(this).removeClass('error'); 
      $('#errorDivId').hide() 
     } 
    } 
});