javascript se concentrer sur la zone de texte sur la validation échouée fonctionnant différemment dans chrome et firefox

Question

Je valide une zone de texte et si la validation échoue, le focus doit être sur la même zone de texte. J'ai cherché sur internet mais je n'ai trouvé aucune réponse appropriée pour cela. Lorsque j'ouvre ma page asp dans Firefox, l'attention se porte sur un autre contrôle après la fermeture du message d'alerte et en chrome le message d'alerte ne peut pas être fermé, il réapparaît chaque fois que je clique sur le bouton ok ou bouton de fermeture de la fenêtre d'alerte . Comment puis-je définir le focus sur la même zone de texte si la validation échoue?

<div class="form-group"> 
          <label for="inputAge" class="col-md-2 control-label" id="lblAge">Age</label> 
          <div class="col-md-9"> 
           <input type="text" id="inputAge" placeholder="35 or 25D or 5M" runat="server" required="required" maxlength="3" onblur="return ValidateAge()" /> 
          </div> 
         </div> 

<script type="text/javascript"> 
     function ValidateAge() { 
      var str = document.getElementById("inputAge").value; 
      var number_regex = /^[1-9]\d*$/; 

      if (str.slice(-1) === 'm') { 
       var number_part = str.slice(0, -1); 

       if (!number_regex.test(number_part)) { 
        alert("invalid age1"); 
        document.getElementById("inputAge").focus(); 
        return false; 
       } 
       else if (number_part > 12) { 
        alert("invalid age2"); 
        document.getElementById("inputAge").focus(); 
        return false; 
       } 
       else { 
        return true; 
       } 
      } 
     } 
    </script> 

Answer 1

Ce problème dépend de l'instruction javascript document.getElementById("inputAge").focus(), qui déclenche un autre événement blur. Donc, vous devez mettre en place une sorte de gestion state qui vous aide à éviter l'exécution de ValidateAge() en raison de cet effet secondaire.

Essayez cette mise en œuvre ainsi:

 var cancelBlurEvent = false; 
     function ValidateAge() { 

      if(cancelBlurEvent === true){ 
       return cancelBlurEvent = false; 
      } 

      var str = document.getElementById("inputAge").value; 
      var number_regex = /^[1-9]\d*$/; 
      if (str.slice(-1) === 'm') { 
       var number_part = str.slice(0, -1); 

       if (!number_regex.test(number_part)) { 
        alert("invalid age1"); 
        cancelBlurEvent = true //it is important to change cancelBlurEvent value before next statement 
        document.getElementById("inputAge").focus(); 
        return cancelBlurEvent; 
       } 
       else if (number_part > 12) { 
        alert("invalid age2"); 
        cancelBlurEvent = true 
        document.getElementById("inputAge").focus(); 
        return cancelBlurEvent; 
       } 
       else { 
        return cancelBlurEvent = false; 
       } 
      } 
     }