Prüfen ob E-Mail gültig ist und alle Felder ausgefüllt worden sind

[ChangedUser677]

Hallo,

ich habe ein Problem. Undzwar, eig. funktioniert alles. Wenn man bei dem Input E-Mail z. B. nur ein "h" eintippt, erscheint oben "E-Mail Adresse ungültig!". Wenn man nicht alle Felder ausgefüllt hat, erscheint "Alle Felder ausfüllen bitte!".

Doch, wenn man alle Felder ausfüllt und eine ungültige E-Mail, in diesem Fall sagen wir wieder "h" eintippt, wird "true" ausgeführt. Also schickt er das Formular dann ab, dass soll er aber nur machen, wenn alles korrekt ist. E-Mail Adresse gültig und alle Felder ausgefüllt.

Der Code ist folgendes:

<script type="text/javascript" language="JavaScript">
         var XMLHTTP = null;
           if( window.XMLHttpRequest ){
             XMLHTTP = new XMLHttpRequest();
           }else if( window.ActiveXObject ){
             try{ XMLHTTP = new ActiveXObject( "Msxml2.XMLHTTP" );
             }catch( ex ){
                try{ XMLHTTP = new ActiveXObject( "Microsoft.XMLHTTP" );
             }catch( ex ){
             }
           }
         } 

         //.... Hier waren andere JS Skripte
         
         function check_form(){           
           if( document.getElementById( "form" ).email.value != "" ){
             function check_email(){
                XMLHTTP.open( "GET", "files_yg/ajax.php?check_mail="+document.getElementById( "form" ).email.value );
                XMLHTTP.onreadystatechange = check_email_error;
                XMLHTTP.send( null );
             }
             
             function check_email_error(){
               if( XMLHTTP.readyState == 4 ){
                var report_user = XMLHTTP.responseText;
  
                 if( report_user == 0 ){
                    document.getElementById("error_form").innerHTML = '<div style="color: red; margin-bottom: 10px;">Bitte gebe eine gültige E-Mail Adresse ein!</div>';
                    return false;
                 }
                 
                 if( report_user == 1 ){
                    return true;                 
                 }
               }  
             }
             check_email();
           }
           
           if( document.getElementById( "form" ).email.value == "" || document.getElementById( "form" ).firstname.value == "" || document.getElementById( "form" ).lastname.value == "" || document.getElementById( "form" ).organization.value == "" || document.getElementById( "form" ).adress_1.value == "" || document.getElementById( "form" ).plz.value == "" || document.getElementById( "form" ).city.value == "" || document.getElementById( "form" ).province.value == "" || document.getElementById( "form" ).phone_1_1.value == "" || document.getElementById( "form" ).phone_1_2.value == "" ){
             document.getElementById("error_form").innerHTML = '<div style="color: red; margin-bottom: 10px;">Bitte fülle alle Pflichtfelder aus! Pflichtfelder sind mit einem* gekenzeichnet.</div>';
             return false;
           }
                 
           return true;
         }
</script>  
<form action="/alv/formular/index.php?create" method="POST" enctype="multipart/form-data" id="form" onsubmit="return check_form();">

Wo ist der Fehler? Warum macht er das?




Variante 2:

<script type="text/javascript" language="JavaScript">
         var XMLHTTP = null;
           if( window.XMLHttpRequest ){
             XMLHTTP = new XMLHttpRequest();
           }else if( window.ActiveXObject ){
             try{ XMLHTTP = new ActiveXObject( "Msxml2.XMLHTTP" );
             }catch( ex ){
                try{ XMLHTTP = new ActiveXObject( "Microsoft.XMLHTTP" );
             }catch( ex ){
             }
           }
         } 

         
         function check_form(){
                    
           if( document.getElementById( "form" ).email.value != "" ){
             function check_email(){
                XMLHTTP.open( "GET", "files_yg/ajax.php?check_mail="+document.getElementById( "form" ).email.value );
                XMLHTTP.onreadystatechange = check_email_error;
                XMLHTTP.send( null );
             }
             
             function check_email_error(){
               if( XMLHTTP.readyState == 4 ){
                var report_user = XMLHTTP.responseText;
  
                 if( report_user == 0 ){
                    return false;
                 }
               }
             }
             
             if( !check_email() ){
                document.getElementById("error_form").innerHTML = '<div style="color: red; margin-bottom: 10px;">Bitte gebe eine gültige E-Mail Adresse ein!</div>';
                return false;             
             }
           } 
           
           if( document.getElementById( "form" ).email.value == "" || document.getElementById( "form" ).firstname.value == "" || document.getElementById( "form" ).lastname.value == "" || document.getElementById( "form" ).organization.value == "" || document.getElementById( "form" ).adress_1.value == "" || document.getElementById( "form" ).plz.value == "" || document.getElementById( "form" ).city.value == "" || document.getElementById( "form" ).province.value == "" || document.getElementById( "form" ).phone_1_1.value == "" || document.getElementById( "form" ).phone_1_2.value == "" ){
             document.getElementById("error_form").innerHTML = '<div style="color: red; margin-bottom: 10px;">Bitte fülle alle Pflichtfelder aus! Pflichtfelder sind mit einem* gekenzeichnet.</div>';
             return false;
           }     
           return true;
         }
</script>

Bei dem klappt es, aber auch wenn E-Mail korrekt ist, erscheint "E-Mail ungültig!"

 

[struppi]

Die ganze Logik ist falsch. AJAX ist asynchron, deshalb kann der Ansatz nicht funktionieren. Du musst mit dem prüfen und dem abschicken warten, bis der onreadystate Event ausgeführt wird. Du kannst hier also nicht den onsubmt Handler benutzen.

Ausserdem musst du Sonderzeichen, die du mit AJAX verschickst, URL kodieren.