2010-12-12 5 views
6

Ich bin auf, was ich dachte, war ein einfacher PEBCAK Fehler meinerseits. Ich versuche zu bestätigen, dass alle meine Funktionen wahr sind, bevor ich ein Formular einreiche, aber ich kann nicht für das Leben von mir einstehen, was falsch ist. Unten ist mein Javascript-Code:Überprüfen Sie, ob mehrere Funktionen wahr sind, dann tun Sie etwas

function checknewaccount(){ 
if(emailvalid()&& checkname() && passwordcheck()) 
{ 
    return true; 
} 
else{ 
    return false; 
} 
} 


function emailvalid() 
{ 
     if(email condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

function checkname()) 
{ 
     if(name condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

function passwordcheck(){ 
     if(password condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

html unter:

<form id="newaccount" name="newaccount" method="post" onSubmit="accountcode.php"> 
<input type="text" id="email" onBlur="emailvalid()"/> 
<input type="text" id="username" onBlur="checkname()" /> 
<input type="password" id="password" onkeyup="passwordcheck()"/> 
<input type="submit" value="New" onClick="return checknewaccount()"/> 
</form> 

Wenn ich auf „Neu, nichts passiert, und ich weiß, das accountcode.php nicht läuft, weil nichts auf der Datenbank Ende passiert und es gibt keine Fehler gemeldet.

um es zusammenzufassen, meine Frage ist, wie checknewaccount() funktioniert nicht? hat es etwas damit zu tun, wie ich sie nenne?

I a Ich bin neu bei Javascript, also wenn ich komplett auf meine Implementierung bin, entschuldige ich mich. Vielen Dank für die Hilfe!

+0

Ok Entschuldigung, ich habe meinen Code in der Frage aufgeräumt und ich hoffe es macht für jeden mehr Sinn. Entschuldigung, früher. – Siriss

+0

handy hinweis, wenn sie 'code schnipsel' in kommentare markieren möchten, verwenden sie einen backtick' (links von 1 auf kbd) vor und nach code – Basic

Antwort

4

Sie haben die Formularsyntax falsch - onsubmit = der Name der js-Funktion, die aufgerufen werden soll, action = die URL ...

<form action="accountcode.php" id="newaccount" name="newaccount" method="post" onSubmit="return checknewaccount()"> 
<input type="text" id="email" onBlur="emailvalid()"/> 
<input type="text" id="username" onBlur="checkname()" /> 
<input type="password" id="password" onkeyup="passwordcheck()"/> 
<input type="submit" value="New"/> 
</form> 

Völlig geprüft Code:

<html> 
    <head> 
     <script type="text/javascript"> 
     function checknewaccount() { 
      return emailvalid() && checkname() && passwordcheck(); 
     } 

     function emailvalid() { 
      var emailAddress = document.getElementById('email').value; 
      return (emailAddress=='test'); 
     } 

     function checkname() { 
      return true; 
     } 

     function passwordcheck() { 
      return true; 
     } 

     </script> 
    </head> 
    <body> 
    <form action="#" onsubmit="return checknewaccount();"> 
     <input type="text" id="email" name="email"/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 

Die Form, in dem obigen Code wird nur einreichen, wenn das Textfeld einen Wert von Test hat

Eine etwas bessere Umsetzung wäre:

<html> 
    <head> 
     <script type="text/javascript"> 
     function checknewaccount() { 
      if(emailvalid() && checkname() && passwordcheck()) { 
       return true; 
      } else { 
       document.getElementById('validation').innerHTML = 'Validation failed!'; 
       return false; 
      } 
     } 

     function emailvalid() { 
      var emailAddress = document.getElementById('email').value; 
      return (emailAddress=='test'); 
     } 

     function checkname() { 
      return true; 
     } 

     function passwordcheck() { 
      return true; 
     } 

     </script> 
    </head> 
    <body> 
    <div id="validation"></div> 
    <form action="#" onsubmit="return checknewaccount();"> 
     <input type="text" id="email" name="email"/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 

Da dies zumindest die u Das Formular wurde nicht übermittelt. Noch besser wäre es, dem Benutzer einen ausführlicheren Grund zu geben, aber das geht über den Rahmen dieser Frage hinaus ...

+0

Ich würde auch vorschlagen, dass Sie mit 'alert()' Befehlen in Ihrem JS arbeiten, um herauszufinden, was gerade läuft (oder das Firebug-Addon in Firefox für einen vollständigen JS-Debugger verwenden) – Basic

+0

@Basiclife: * "Ich würde auch vorschlagen dass du alert() - Befehle in deinem JS verwendest ... "* ** Gott nein **, es gibt keine * Entschuldigung mehr für Debug-via-Alert. Verwenden Sie Firebug (wie Sie erwähnt haben), oder Chrome Dev Tools oder Visual Studio oder ... :-) +1 für die Formular-Sache, ich habe nicht einmal auf den HTML-Code geschaut. –

+0

@Basiclife: das wird nicht funktionieren, weil meine Javascript-Funktion checknewaccount() die Datei accountcode.php nicht aufruft. Ich möchte die Javascript bestätigen alle Felder korrekt sind und dann das Formular an accountcode.php senden. Ich habe checknewaccount() auf der Übermittlungsschaltfläche zurückgegeben, so dass es nur gesendet wird, wenn checknewcocount true zurückgibt. Ich habe das in der Vergangenheit mit etwas wie dem folgenden benutzt .... – Siriss

5

Dieser Teil ist in Ordnung (habe ich mir erlaubt, die Vertiefung der Befestigung):

function checknewaccount(){ 
    return emailvalid() && checkname() && passwordcheck(); 
} 

Dieser Teil Fehler ist eine Syntax (um es milde auszudrücken:

function checknewaccount(){ 
    if(emailvalid()&& checkname() && passwordcheck()) 
    { 
     return true; 
    } 
    else{ 
     return false; 
    } 
} 

Obwohl Sie es verbessern könnte):

Wenn das kein echtes Zitat aus Ihrem Code ist, müssen Sie yo aktualisieren Ihre Frage (obwohl ich vielleicht nicht hier bin, um diese Antwort zu aktualisieren). Es macht keinen Sinn, nach Code zu fragen und dann Pseudo-Code in der Frage zu zitieren. (. Am allerwenigsten, der Pseudo-Code, um die endgültigen } fehlt)

Die gleiche Art der Sache gilt für Ihre Funktionen in der Form:

function emailvalid() 
{ 
     if(email condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

ist die in Ordnung (unter der Annahme, dass email condition ist noch psuedocode), aber es gibt keine Notwendigkeit für die if:

function emailvalid() 
{ 
    return email condition; 
} 

In Bezug auf die „nichts passiert“ Sie Debugging-Tools stellen Sie sicher, haben Sie uns e. In Chrome sind Entwicklungswerkzeuge integriert. Drücken Sie einfach Strg + Umschalt + I. Für Firefox können Sie den ausgezeichneten Firebug installieren. In neueren Versionen von IE sind ebenfalls Entwicklungswerkzeuge integriert (für ältere Versionen können Sie eine kostenlose Version von Visual Studio herunterladen, die sich in den Browser einklinken kann). Jede dieser Anweisungen wird Sie über Syntax- und andere Fehler informieren. Sie können Ihre Anweisungen in den einzelnen Anweisungen nacheinander durchgehen, um herauszufinden, was gerade geschieht.

Hier ist eine schnell gestrichelte Version von dem, was ich denke, Sie versuchen zu tun. Ich würde es auf diese Weise nicht tun, aber ich habe die minimalen Änderungen vorgenommen, damit es funktioniert:

HTML:

<form action="http://www.google.com/search" 
     method="GET" target="_blank" 
     onsubmit="return checknewaccount()"> 
<input type="text" id="email" name='q' onblur="emailvalid()"> 
<input type="text" id="username" onblur="checkname()" > 
<input type="password" id="password" onkeyup="passwordcheck()"> 
<input type="submit" value="New"> 
</form> 

Hinweise dazu:

  • Als Basiclife pointed out, Ihre form Code hat Probleme. Diese sind oben festgelegt.
  • Oben habe ich action="http://www.google.com/search" verwendet, aber natürlich für Sie wäre es action="accountcode.php" (oder zumindest, ich denke, es wäre).
  • Verwenden Sie onsubmit für den Formularübergabe-Handler, nicht onclick auf die Schaltfläche Senden. Sie können eine Formularübergabe nicht zuverlässig über die Schaltfläche onclick des Absenders bannen.
  • In onsubmit, stellen Sie sicher, Sie verwenden return   — z.B. onsubmit="return checknewaccount()", nicht onsubmit="checknewaccount()"   —, weil wir das Ereignis Zeug sieht den Rückgabewert überprüfen wollen. Es ist uns egal, ob der Event-Stuff den Rückgabewert unserer anderen Checks nicht anzeigt (onblur="emailvalid()"), aber wenn wir das täten, würden wir auch return s benötigen.
  • Nur eines der obigen Felder hat ein name Attribut; keiner von euch tut es. Nur Felder mit name Attributen werden mit Formularen eingereicht. Ich habe nur eine name für mein Beispiel verwendet, weil ich nur ein Feld an Google senden möchte, aber für Ihre Zwecke werden Sie name Attribute für alle drei Felder wünschen. This brief article hat eine Diskussion von id vs name und was sie sind. Du willst manchmal beides.
  • Ich habe die Attribute in allen Kleinbuchstaben, was Best Practice (und erforderlich, wenn Sie XHTML verwenden wollen).
  • Allerdings habe ich die / von den Enden der inputs entfernt. Dies ist ein wenig off-topic, aber auf der offensichtlichen Ebene, an der Sie arbeiten, wollen Sie nicht versuchen, XHTML zu verwenden, verwenden Sie HTML. Die korrekte Verwendung von XHTML ist sowohl in der Authoring- als auch in der Serverkonfiguration technisch schwierig, und selbst dann muss es dem IE als Tag-Suppe serviert werden oder es wird nicht richtig funktionieren. XHTML hat seinen Platz, aber in den allermeisten Fällen gibt es keinen Grund, es zu benutzen.
  • Mit dem oben genannten kombiniert mit dem JavaScript unten, gibt es keinerlei Zweck für die Handler auf den einzelnen Feldern. Ich habe sie jedoch verlassen, weil ich davon ausgehe, dass Sie mehr tun als nur die Schecks unter   —, es gibt ein Beispiel weiter unten, das diese Handler zeigt, die etwas Nützliches tun.

JavaScript:

function checknewaccount() { 
    return emailvalid() && checkname() && passwordcheck(); 
} 

function emailvalid() { 
    var element; 

    // Get the email element 
    element = document.getElementById('email'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.indexOf('@') > 0; 
} 

function checkname() { 
    var element; 

    // Get the username element 
    element = document.getElementById('username'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.length > 0; 
} 

function passwordcheck() { 
    var element; 

    // Get the username element 
    element = document.getElementById('password'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.length > 0; 
} 

Live copy

Dinge etwas ändern, wenn die emailvalid, et. Al., Werden Funktionen, etwas zu tun wissen zu lassen, der Benutzer die Felder sind ungültig, wie ihre Etiketten hervorzuheben:

HTML:

<form action="http://www.google.com/search" 
     method="GET" target="_blank" 
     onsubmit="return checknewaccount()"> 
<label>Email: 
<input type="text" id="email" name='q' onblur="emailvalid()"></label> 
<br><label>Username: 
<input type="text" id="username" onblur="checkname()" ></label> 
<br><label>Password: 
<input type="password" id="password" onkeyup="passwordcheck()"/></label> 
<br><input type="submit" value="New"> 
</form> 

JavaScript:

function checknewaccount() { 
    var result; 
    // Because we're actually doing something in each of the 
    // three functions below, on form validation we want to 
    // call *all* of them, even if the first one fails, so 
    // they each color their field accordingly. So instead 
    // of a one-liner with && as in the previous example, 
    // we ensure we do call each of them: 
    result = emailvalid(); 
    result = checkname() && result; 
    result = passwordcheck() && result; 
    return result; 
} 

function emailvalid() { 
     var element, result; 

    // Get the email element 
    element = document.getElementById('email'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.indexOf('@') > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function checkname() { 
    var element, result; 

    // Get the username element 
    element = document.getElementById('username'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.length > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function passwordcheck() { 
    var element, result; 

    // Get the username element 
    element = document.getElementById('password'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.length > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function updateLabel(node, valid) { 
    while (node && node.tagName !== "LABEL") { 
    node = node.parentNode; 
    } 
    if (node) { 
    node.style.color = valid ? "" : "red"; 
    } 
} 

Live copy

+0

Vergessen über den syntax fehler, was ist der punkt von drei funktionen, wenn sie alle gleich sind ? – nico

+0

@Nico Ich vermute, sie sind nicht - die "Bedingung" wird in jedem variieren. – Basic

+0

@Basiclife: Ja, das ist auch meine Annahme, aber ... –