Ajax Formularvalidierung

Ich habe eine Formularvalidierung mit Ajax/PHP erstellt. Jedes Textfeld wird unter Verwendung einer anderen Datei, z.B. benutzername_ajax.php. Sobald die Information als in Ordnung befunden wurde, wird sie auf dem Bildschirm wiederholt ("Benutzername ok"). Ich kann nicht herausfinden, wie man dem Benutzer erlaubt, den Absendet-Knopf nur zu drücken, sobald alle Textfelder "OK" sind. Jede Hilfe wird geschätzt, Danke.Ajax Formularvalidierung

Mein Code (Leider seine lange):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sign-up</title> 
</head> 
<script type="text/javascript"> 

    function username(username) 
{ 
    var httpRequest; 
    make_request() 
    function stateck() 
     { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById ("user_div").innerHTML=httpxml.responseText; 
      } 
     } 

    httpxml.onreadystatechange=stateck; 
    user_url="ajax_username.php?username=" + username.value; 
    httpxml.open("GET",user_url,true); 
    httpxml.send(null); 
} 


function email(email) 
{ 
    var httpRequest; 
     make_request() 
     function stateck() 
     { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById("email_div").innerHTML=httpxml.responseText; 
      } 
     } 

    httpxml.onreadystatechange=stateck; 
    email_url="ajax_email.php?value=" + email.value; 
    httpxml.open("GET",email_url,true); 
    httpxml.send(null); 
} 

function confirm(password,conpassword) 

{ 
    var httpRequest; 
    make_request() 
    function stateck() 
    { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById("conpass_div").innerHTML=httpxml.responseText; 
      } 
     } 
    httpxml.onreadystatechange=stateck; 
    conpassword_url="ajax_password.php?password=" + password.value + "&conpassword=" + conpassword.value; 
    httpxml.open("GET",conpassword_url,true); 
    httpxml.send(null); 
} 


</script> 

<body> 
<div id="user_div"></div> 
<div id="conpass_div"></div> 
<div id="email_div"></div> 
<form id="form" name="form" method="post" action=""> 
<label>Username<br /> 
     <input type="text" name="username" id="username" onBlur="check_username(username)"> 
     <br /> 
<br /> 
    </label> 

    <label>Password<br /> 
    <input type="password" name="password" id="password" onBlur="check_confirm  (password,conpassword);"> 
    </label>  

    <label><br /> 
    <br /> 
    Confirm Password<br /> 
    <input type="password" name="conpassword" id="conpassword" onBlur="check_confirm(password,conpassword);"> 
    <br /> 
    <br /> 
    </label>  

<label>Email<br /> 
<input type="text" name="email" id="email" onblur="check_email(email)" /> 
    <p> 
    <p> 
    <label> 
     <input type="submit" name="button" id="button" value="Submit" onclick="return false;" /> 
     </label> 
    </p> 
</form> 
</body> 
</html>

Quelle

2009-05-01 Elliott

Gibt es hier eine Frage? –

Ich kann nicht herausfinden, wie man dem Benutzer erlaubt, den Absendet-Knopf nur zu drücken, sobald alle Textfelder "OK" sind. Ja .... wie? – Elliott

Sie müssen Statusflags haben und eine Prüfroutine ..

Beginnen Sie mit Ihrer Eingabe-Taste aus deaktiviert:

<input type="submit" name="submit" id="button" disabled>

Grundsätzlich ..

var userNameOk; 
var passwordOk; 
var emailOk; 

function checkCanSubmit() { 
    if (userNameOk && passwordOk && emailOk) { 
    document.getElementById("button").disabled= false; 
    else 
    document.getElementById("button").disabled= true; 
}

Dann würden Sie ändern Ihre anonyme Methoden für jede Prüffunktion, um das richtige Statusflag zu aktualisieren und die Methode checkCanSubmit() aufzurufen;

function stateck() 
    { 
      if(httpxml.readyState==4) 
      { 
       if (httpxml.response.Text == "whateverisvalid") { 
       emailOk = true; 
       } else { 
       emailOk = false; 
       } 
       checkCanSubmit(); 
       document.getElementById("email_div").innerHTML=httpxml.responseText; 
      } 
    }

BTW, würde ich die Tatsache in Frage, dass Sie die Benutzername und das Passwort sind zu senden .. auf dem Query-String .. für die ganze Welt .. zu sehen, welche (vielleicht für immer) eine beliebige Anzahl gespeichert werden von Router-Logs, Snifferen, Proxy-Servern .. und Ihren Webserver-Log-Dateien.

Gibt es keinen besseren/saubereren/schlaueren Weg das zu tun?

Quelle

2009-05-01 14:02:04 datacop

Dank Ich werde versuchen, dass und ja über die secuirty .... Ich werde die gesendeten Informationen verschlüsseln. Dies ist noch kein fertiges Skript. Thamks – Elliott

Nur noch eine Sache Wie hätte ich die Schaltfläche standardmäßig deaktiviert? wie wenn die Seite lädt ...? – Elliott

Ich veränderte meine Antwort zu zeigen, wie die Eingabe-Taste, um Markup deaktiviert zu sein und die checkCanSubmit fixiert() .. genießen :) – datacop

die Taste, um Behinderte vorlegen gesetzt, bis alle Eingaben validiert wurden.

Um dies zu überprüfen, überprüfen Sie, wenn alle Eingaben überprüft wurden, ob bereits alle anderen Eingaben validiert wurden. Sie müssen ein globales Array erstellen, um festzulegen, welche Eingaben gültig sind.

Beachten Sie, dass Sie diese Validierung zwar auch durchführen sollten, aber die Überprüfung erneut durchführen sollten, sobald das Formular tatsächlich gesendet wurde, da ein böswilliger Benutzer weiterhin ungültige Eingabedaten senden konnte.

Quelle

2009-05-01 13:51:36

Danke Ich habe bereits versucht, das globale Array zu verwenden ... wie jedes Mal hinzugefügt, wenn es validiert ist. Dann mache ich eine if-Anweisung, wenn das Array gleich vier ist. Aber ich weiß nicht, wie man den Übermittlungsknopf 'aktiviert', also aktualisiert die Seite den Fehler nicht? – Elliott

Ajax Formularvalidierung

Antwort

Verwandte Themen