2010-12-12 12 views
6

Utknąłem na tym, co uważałem za prosty błąd PEBCAK z mojej strony. Próbuję sprawdzić, czy wszystkie moje funkcje są prawdziwe, zanim przedłożę formularz, ale nie mogę określić dla mnie, co jest nie tak. Poniżej jest kod javascript:Sprawdź, czy wiele funkcji jest prawdą, a następnie zrób coś.

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 poniżej:

<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> 

Po kliknięciu „Nowy, nic się nie dzieje, a wiem, że accountcode.php nie działa, bo nic się nie dzieje na końcu bazy i nie ma żadnych błędów zgłaszanych.

Podsumowując, moje pytanie jest jak checknewaccount() nie działa? Czy to ma coś wspólnego z tym, jak ja nazywając je?

i a m nowy do javascript, więc jeśli całkowicie zrezygnowałem z mojej implementacji, przepraszam. Bardzo dziękuję za pomoc!

+0

Ok, przepraszam, że wyczyściłem mój kod w pytaniu i mam nadzieję, że będzie bardziej sensowny dla wszystkich. Przepraszam za to wcześniej. – Siriss

+0

poręczna podpowiedź, jeśli chcesz oznaczyć fragmenty kodu w komentarzach, użyj kodu zwrotnego '(po lewej stronie 1 na kbd) przed i po kodzie – Basic

Odpowiedz

4

masz błędną składnię formularza - onsubmit = nazwa funkcji js do wywołania, action = adres 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> 

pełni przetestowany kod:

<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> 

forma w powyższym kodzie złoży tylko wtedy, gdy pole tekstowe ma wartość testu

Nieco lepsze wdrożenie byłoby:

<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> 

Jak to przynajmniej mówi u ser formularz nie został złożony. Jeszcze lepiej byłoby podać użytkownikowi bardziej szczegółowy powód, ale to wykracza poza zakres tego pytania ...

+0

Proponuję również, abyś zaczął używać komend 'alert()' w swoim JS, aby ustalić, co działa (lub użyć dodatku firebug w firefox dla pełnego debuggera JS) – Basic

+0

@Basiclife: * "Chciałbym również zasugerować że zaczniesz używać komend alert() w twoim JS ... "* ** God no **, nie ma już * żadnego * usprawiedliwienia dla debugowania poprzez alert. Użyj Firebuga (jak wspomniałeś), lub narzędzi deweloperskich Chrome lub Visual Studio, lub ... :-) +1 dla formy, nawet nie spojrzałem na HTML. –

+0

@Basiclife: to nie zadziała, ponieważ moja funkcja JavaScript checknewaccount() nie wywołuje pliku accountcode.php. Chcę, aby javascript potwierdził, że wszystkie pola są poprawne, a następnie prześlij formularz do accountcode.php. Użyłem return checknewaccount() na przycisku "submit", aby przesłać tylko wtedy, gdy checknewacount zwróci true. Używałem tego w przeszłości z czymś podobnym do tego ... – Siriss

5

Ta część jest w porządku (pozwoliłem sobie mocowania wcięcia):

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

Chociaż można to poprawić:

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

Ta część jest błąd składni (delikatnie mówiąc):

function emailvalid(), checkname(), passwordcheck(){ 
if(condition){ 
    return true;} 
else{return false;} 

Jeśli to nie jest prawdziwy cytat z twojego kodu, będziesz musiał zaktualizować yo na pytanie (chociaż może nie być tutaj, aby zaktualizować tę odpowiedź). Nie ma sensu pytać o kod, a następnie cytować pseudo-kod w pytaniu. (. Przynajmniej, pseudo-kod brakuje ostatecznej })

Ten sam rodzaj rzeczy jest prawdziwe dla funkcji w postaci:

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

to w porządku (zakładając, że email condition jest nadal psuedocode), ale nie ma potrzeby, aby if:

function emailvalid() 
{ 
    return email condition; 
} 

W kategoriach „nic się nie dzieje”, upewnij się, że masz narzędzia do debugowania można nas mi. Chrome ma wbudowane Dev Tools, wystarczy nacisnąć Ctrl + Shift + I. W przeglądarce Firefox możesz zainstalować doskonałą Firebug. W najnowszych wersjach IE wbudowane są także narzędzia dla deweloperów (w starszych wersjach można pobrać bezpłatną wersję Visual Studio, którą można podłączyć do przeglądarki). Każda z nich powie ci o składni i innych błędach, pozwoli ci przejrzeć kod po oświadczeniu, itd., Co jest kluczowe, aby dowiedzieć się, co się dzieje.

Oto szybko przerywana wersja tego, co myślę, że próbujesz zrobić. Nie chciałbym zrobić to w ten sposób, ale zrobiłem minimalne zmiany, aby to działało:

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> 

Uwagi na temat, że:

  • Jak Basiclife pointed out Twój form kod ma problemy. Są one ustalone powyżej.
  • Powyżej użyłem action="http://www.google.com/search", ale oczywiście dla ciebie będzie to action="accountcode.php" (a przynajmniej tak myślę).
  • Użyj instrukcji obsługi formularza, a nie na przycisku przesyłania. Nie można anulować niezawodnego przesyłania dokumentów za pośrednictwem przycisku przesyłania onclick.
  • W onsubmit, upewnij się, że używasz return   — np onsubmit="return checknewaccount()" nie onsubmit="checknewaccount()"   — ponieważ chcemy, aby upewnić się, że rzeczy wydarzenie widzi zwracanej wartości. Nie obchodzi nas, czy dane zdarzenia nie widzą wartości zwracanej przez nasze inne kontrole (onblur="emailvalid()"), ale gdyby tak było, potrzebowalibyśmy również return.
  • Tylko jedno z powyższych pól ma atrybut name; nikt z twoich nie. Tylko pola z atrybutami name są przesyłane z formularzami. Na moim przykładzie użyłem tylko jednego numeru name, ponieważ chcę przesłać tylko jedno pole do Google, ale dla twoich celów będziesz chciał uzyskać atrybuty name we wszystkich trzech polach. This brief article ma omówienie id vs. name i do czego służą. Czasem chcesz obu.
  • Umieściłem atrybuty we wszystkich małych literach, co jest najlepszą praktyką (i wymagane, jeśli chcesz używać XHTML).
  • Jednak usunąłem / z końców inputs. To trochę nie na temat, ale na pozornym poziomie, nad którym pracujesz, nie chcesz próbować używać XHTML, używaj HTML. Prawidłowe używanie XHTML jest technicznie trudne, zarówno podczas tworzenia treści, jak i konfiguracji serwera, a nawet wtedy musisz podawać je jako zryw tagu do IE lub nie będzie on obsługiwał poprawnie. XHTML ma swoje miejsce, ale w zdecydowanej większości przypadków nie ma powodu, aby z niego korzystać.
  • Powyższe w połączeniu z poniższym JavaScriptem nie ma żadnego znaczenia dla modułów obsługi poszczególnych pól. Zostawiłem je jednak, ponieważ zakładam, że robisz coś więcej niż tylko kontrole poniżej, poniżej znajduje się przykład pokazujący, że te programy obsługi robią coś pożytecznego.

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

Wszystko zmienia się nieco, jeśli emailvalid, et. Al., Funkcje zamiar coś zrobić, aby poinformować użytkownika, że ​​pola są nieważne, takie jak wyróżnianie ich etykiety:

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

Zapominając o błędzie składni, jaki jest sens posiadania trzech funkcji, jeśli wszystkie są takie same ? – nico

+0

@nico Zgaduję, że nie są - "stan" będzie się różnić w każdym z nich. – Basic

+0

@Basiclife: Tak, to także moje założenie, ale ... –

Powiązane problemy