JavaScript erreur piégeage ne lit pas 0 (zéro)

Question

Le JavaScript ci-dessous vérifie s'il y a 4 chiffres dans un champ et avertit s'il n'y en a pas.

Mais pour une raison quelconque, si j'entre quatre zéros (0000), il prend cela comme champ vide et lance l'avertissement.

Une idée pour résoudre ce problème ... ?? Je ne suis pas un programmeur mais j'ai mis ce code ensemble après des semaines d'essais et d'erreurs.

function validate(){ 
// if ((!isNaN($("#couponstart1").val())) || (!isNaN($("#couponstart2").val())) || (!isNaN($("#couponend1").val())) || (!isNaN($("#couponend2").val())) ) { 
    var all_ok = true; 
    var err_msg = ""; 
    var fld = ""; 

    if ($("#couponstart1").val() == '' || $("#couponstart2").val() == '' || $("#couponend1").val() == '' || $("#couponend2").val() == '') { 
     all_ok = false; 
     err_msg += "\n - Card Numbers cannot be blank"; 
     fld='couponstart1'; 
    }else{ 
     if (isNaN($("#couponstart1").val()) || isNaN($("#couponstart2").val()) || isNaN($("#couponend1").val()) || isNaN($("#couponend2").val())) { 
      all_ok = false; 
      err_msg += "\n - Card Number has to be numeric"; 
      fld='couponstart1'; 
     }else{ 
      if ($("#couponstart1").val() < 1 || $("#couponstart2").val() < 1 || $("#couponend1").val() < 1 || $("#couponend2").val() < 1) { 
       all_ok = false; 
       err_msg += "\n - Card Numbers are not correct"; 
       fld='couponstart1'; 
      }else if ($("#couponstart1").val().length != 4 || $("#couponstart2").val().length != 4 || $("#couponend1").val().length != 4 || $("#couponend2").val().length < 4){ 
       all_ok = false; 
       err_msg += "\n - Card Numbers are not correct"; 
       fld='couponstart1'; 
      } 
     } 
    } 

    if (all_ok == false){ 
     alert("The following errors have taken place" + err_msg); 
     setFocus(fld); 
    } 
    return all_ok;  

} 

Answer 1

Il est triste que les ordinateurs fassent ce que nous demandons, pas ce que nous voulons.

Si votre entrée est rempli de 0000, et vous comparez < avec le nombre 1: ($("#couponstart1").val() < 1, javascript va essayer d'analyser la valeur 0000 du type d'opérande qui représente à 0. Donc, il est juste de dire que 0 is lower than 1 et vous obtiendrez votre message d'erreur Card number are not correct.

Essayons une approche différente:

<!-- html --> 
<form> 
    <p> 
     <label for="couponstart1">Coupon Start Part 1</label> 
     <input type="text" maxlength="4" id="couponstart1" class="validateme" /> 
    </p> 
    <p> 
     <label for="couponstart2">Coupon Start Part 2</label> 
     <input type="text" maxlength="4" id="couponstart2" class="validateme" /> 
    </p>  
    <p> 
     <label for="couponend1">Coupon End Part 1</label> 
     <input type="text" maxlength="4" id="couponend1" class="validateme" /> 
    </p> 
    <p> 
     <label for="couponstart2">Coupon Start End 2</label> 
     <input type="text" maxlength="4" id="couponend2" class="validateme" /> 
    </p> 
    <button type="button" id="testit">Test</button> 
</form> 

et:

/* javascript/jQuery */ 
$(document).ready(function(){ 
    $("#testit").click(function(){ 
     var rgx = /\d{4}/; 
     var allgood = true; 
     $("input.validateme").each(function(){ 
      if(! rgx.test($(this).val())){ 
       alert("Card number for " + ($('label[for="' + $(this).attr("id") + '"]').text()) + " is not correct!\nPlease use 4 digits all numbers!"); 

       $(this).select(); 
       allgood = false; 
       return false; 
      } 
     }); 
     if(allgood) alert("All good!"); 
    }); 
}); 

Fondamentalement, nous avons une forme avec 4 inputs avec "validateme" class. Avec jQuery nous bouclons sur les entrées qui ont cette classe et l'exécutons contre la regex /\d{4}/ qui testera fondamentalement un nombre (\d) exactement 4 chiffres ({4}) signifiant de 0000 à 9999. Notez que nous utilisons l'étiquette du entrée pour identifier quel champ n'est pas correct.

Sinon, tout va bien.

Vous pouvez jouer avec ce code ici: http://jsfiddle.net/L8dcgcrs/1/

Answer 2

En supposant que les quatre chiffres correspondent à $("#couponstart1").val(), $("#couponstart2").val(), $("#couponend1").val(), $("#couponend2").val() alors le problème est que dans JavaScript, il existe deux types d'opérateurs de comparaison.

Dans votre première instruction if, vous choisissez d'évaluer if $("#coupontstart1").val() == '' || ...). Dans ce cas, vous utilisez un opérateur d'égalité qui convertit les opérandes s'ils ne sont pas du même type. L'utilisation de cet opérateur 0 == '' renvoie true. Au lieu de cela, vous pouvez utiliser l'opérateur d'égalité stricte === de la manière suivante:

if ($("#couponstart1").val() === '' || ...) 

Dans ce cas 0 === '' reviendrait faux. Cela vous aidera probablement dans la première instruction if si vous écrivez 0000 rendrait toutes les conditions fausses et vous passeriez au bloc else.

Espérons que cela aide!