2016-08-27 2 views
0

Neu bei JS Kerl hier! Ich habe das Gefühl, dass ich verstehe, was mein Code macht, aber es wird immer noch nicht funktionieren.Formular Validierung Leiden

Der Fehler ist (angeblich) mit der Validierung für die Telefonnummer Formular, ich habe Code, der - soweit ich weiß - sollte funktionieren (aber nicht).

Beachten Sie, dass ich keinen Code zur Validierung von Adresse, Postleitzahl und CC habe. Die Idee ist, dass ich Ihre Lösungen auf Thesen anwenden kann, da sie der Telefonnummer ähnlich sind.

Beachten Sie auch, dass ich IsNaN versuchte, aber es war "komisch". Hoffe, das ist nicht zu vage, aber ich bin sicher, dass einige von Ihnen "wissen", wovon ich rede.

Hier gehen wir (Sorry, wenn meine Funktion ein bisschen zu lang ist, lassen Sie mich wissen, ob seine schlechte Praxis oder was auch immer.)

Lets bleiben weg von stumpfen Antworten, wenn wir können? Ich möchte, was falsch wissen, so dass ich es selbst reparieren kann, gehe ich durch sie, wenn Sie den Geist haben, geduldig zu sein :)

JS und HTML:

function detailCheck() { 
 
    var phNoLength = document.getElementById('phNo').value.length; //get value for phone number from form for checking 
 
    var cardNoLength = document.getElementById('cardNo').value.length; //get value for card number length for checking 
 
    var postCodeLength = document.getElementById("postCode").value.length //get value for post code length 
 
    var a = /^[A-Za-z]+$/; 
 
    var b = /^[-+]?[0-9]+$/; 
 
for (var i = 0; i < 5; i++) { 
 
    details = document.getElementById("myForm")[i].value; 
 
    if (details === "") { 
 
    var i = ("Please enter ALL your details."); 
 
    document.getElementById("formTital").innerHTML=i; 
 
    return; 
 
    } else { 
 
    
 
    if(phNoLength != 7) { 
 

 
     var i = "Please use a phone number with a length of 7"; 
 
     document.getElementById("formTital").innerHTML = i;  
 
    } else { 
 
     if(b.test(document.getElementById("phNo").value)) { 
 
     \t 
 
     if(postCodeLength === 4){ 
 
      
 
     var f_nameLength = document.getElementById('fName').value.length; 
 
     var l_nameLength = document.getElementById('lName').value.length; 
 

 
     if(f_nameLength < 3) { 
 
     var i = "First name not long enough" 
 
     document.getElementById("formTital").innerHTML=i; 
 

 
     } else { 
 

 
      if(a.test(document.getElementById("fName").value)) {  
 
     \t if(l_nameLength < 3) { 
 
       var i = "Last name not long enough" 
 
       document.getElementById("formTital").innerHTML=i; 
 

 
       } else { 
 

 
        if(a.test(document.getElementById("lName").value)) { 
 
        \t 
 
        \t if(cardNoLength === 4) { 
 
        \t \t 
 
        \t \t if(isNaN(cardNoLength)) { 
 
          var i = "Your card number must be numbers only"; 
 
          document.getElementById("formTital").innerHTML=i; 
 

 
         } else { 
 
          //---- End result ----// 
 
          toggleContent(); 
 
          //--------------------// 
 
         } 
 
         } else { 
 
       \t   var i = "Your card number must have four numbers"; 
 
         document.getElementById("formTital").innerHTML = i; 
 
         } 
 
        } else {  
 
        var i = "Please only use letters in your last name"; 
 
        document.getElementById("formTital").innerHTML=i; 
 
        } 
 
       } 
 
      } else { 
 
     \t  var i = "Please only use letters in your first name"; 
 
      document.getElementById("formTital").innerHTML=i; 
 
      } 
 

 
     } 
 
     } else { 
 
    \t var i = "Please use a post code with a length of four"; 
 
    \t document.getElementById("formTital").innerHTML = i; 
 
     } 
 
    } else { 
 
    var i = "only use numbers in your Phone number"; 
 
    document.getElementById("formTital").innerHTML=i; 
 
    } 
 
} 
 
} 
 
} 
 
}
<form id="myForm" action="form_action.asp"> 
 
    First name: <br> <input class="formInput" type="text" id="fName" name="fName"><br> 
 
    Last name: <br> <input class="formInput" type="text" id="lName" name="lName"><br> 
 
    Phone Number: <br> <input class="formInput" type="number" id="phNo" name="phNo" maxlength="7"><br> 
 
    Credit Card Number: <br> <input class="formInput" type="password" id="cardNo" name="cardNo" maxlength="4"><br> 
 
    Address: <br> <input class="formInput" type="text" id="address" name="address"><br> 
 
    Post code: <br> <input class="formInput" type="number" id="postCode" name="postCode" maxlength="4"><br> 
 
    </form>

+0

Das ist eine * Menge * von verschachtelten 'if's ... –

+0

Das ist eine schlechte Sache? Wie würden Sie Bedingungen wie Thesen setzen? – Draxy

+0

Nicht unbedingt eine schlechte Sache, aber ich persönlich denke, dass sie sehr verwirrend werden, besonders abhängig von der Einrückung. –

Antwort

0

Es ist nicht offensichtlich, wann die Validierung stattfinden soll (Sie haben eine Funktion hinzugefügt, aber es ist nicht klar, ob Sie eine Ereignisbehandlungsroutine haben möchten oder nicht).

Ihre Regex scheint in Ordnung zu sein. Ich schließe eine abgespeckte JSFiddle mit einer einzigen input ein, an die ich einen Event-Handler für keyup anschliesse und das Ergebnis von .test() für Ihre Regex zeigte.

See it here.

In Bezug auf Ihren Code ist es ziemlich chaotisch. In Bezug auf Formularvalidierung. Ich nehme an, dass Sie eine einzelne Statusmeldung für den Benutzer anzeigen möchten, also möchten Sie zuerst die Priorität Ihrer Validierung herausfinden. Eine sauberere Möglichkeit wäre, eine Funktion zu verwenden mit geordneten return s, zum Beispiel nimmt diesen Pseudo-Code:

function getErrorMessage(){ 
    // if name is invalid 
    //   return 'Your name is invalid.'; 
    // if phone is invalid 
    //   return 'Your phone is invalid.'; 
    // ... 
    // return ''; 
} 

Nesting so viele bedingten Anweisungen können zu sehr chaotisch führen, sehr nicht-verwaltbaren Spaghetti-Code. Wenn Sie neu in Javascript sind, ist es am besten, die Best Practices früh zu lernen, da es Ihnen in Zukunft viele Kopfschmerzen und Kopfschmerzen ersparen wird.

Wenn ich Ihre Frage nicht richtig verstanden habe, lassen Sie es mich bitte wissen.

+0

Ich denke daran, diese Funktion neu zu programmieren - nur um es nicht unordentlich zu machen. Aber es gibt so viele Bedingungen, auf die man achten muss! Irgendwelche Ratschläge, wie man damit umgeht?Separate Funktionen vielleicht? – Draxy

+0

Es muss nicht kompliziert sein, wenn Sie diese Art von Design neu erstellen möchten, entscheiden Sie einfach, was Sie für die richtige Reihenfolge der Validierung halten, gehen Sie dafür. Ich fühle mich, als ob ein natürliches UX die ungültige Nachricht für die letzte Eingabe hätte, die unscharf und ungültig war. Lesen Sie dazu die Formularvalidierung und UI/UX. –