javascript: Funktion zur Formular Überprüfung

[ddjjmm]

Hallo zusammen

habe auf meiner Website ein Kontaktformular eingefügt, dass die eingegebenen Daten an SugarCRM weiterleitet. Der kleine Haken:

Die Kontrolle der eingegebenen E-Mail Adresse klappt nicht 100%:

- Prüfung auf korrekte E-Mail ( mit @ und .) funktioniert
- Leere Eingabe: Fehlerhinweis, allerdings wird das formular doch abgeschickt

<form action="http://www.server.de/webtools/sugarcrm3/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" method="POST" id="WebToLeadForm">
   <!--<br />E-Mail Adresse:--><br /><input id="last_name" name="last_name" type="hidden" value="opt-in">
    <center>E-Mail: <input id="webtolead_email1" name="webtolead_email1" onchange="validateEmailAdd();" type="text" border="1" style="color: #3287DA; font-family: Verdana; font-size: 12px; background-color: #F5F5F5; border-color: #3287DA" size="30"><input onclick="submit_form();" class="button" name="Submit" value="Absenden" type="image" src="http://www.server.de/images/send.gif"></center>
    <input id="campaign_id" name="campaign_id" value="12345" type="hidden"> 
    <input id="assigned_user_id" name="assigned_user_id" value="54321" type="hidden">
    <input id="req_id" name="req_id" value="webtolead_email1;" type="hidden">
    </form>
      
      <p><script type="text/javascript"><!--
 function submit_form(){
     if(typeof(validateCaptchaAndSubmit)!='undefined'){
         validateCaptchaAndSubmit();
     }else{
         check_webtolead_fields();
     }
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Bitte geben Sie alle erforderlichen Felder an');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
    if(document.getElementById('webtolead_email1').value.length >0) {
        if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
          alert('Keine gültige E-Mail Adresse');
        }
    }
}
// --></script></p>

Hat jemand eine Idee, wo der Fehlerteufel steckt?

 

[Duddle]

AW: javascript: Funktion zur Formular Überprüfung

Die Funktion validateEmailAdd() ist auch nur zum Spaß da, oder? Erstens meckert die nur beim Ändern des Formularfeldes, zweitens macht sie nichts weiter als pures Meckern, gibt nichtmal Werte zurück. Die Abschick-Funktion selbst ruft sie auch nicht ab.

Das kann einfach nicht funktionieren.

Pass die validateEmailAdd() soweit an, dass sie eine gescheite Antwort gibt, dann frag sie in check_webtolead_fields() ab und reagier entsprechend.


Duddle

 

[Sorc]

AW: javascript: Funktion zur Formular Überprüfung

Deine Abfrage, ob die E-Mail korrekt ist, musst du weiter oben mit einsetzen. Denn wenn alle erforderlichen Felder korrekt eingegeben wurden wird das Formular gesendet. Die Prüfung der E-Mail Adresse wird erst danach abgefragt.

Und ausserdem kommt kein Fehler zurück wenn das Feld der E-Mail gleich leer ist.

 

[mckbrother]

AW: javascript: Funktion zur Formular Überprüfung

Außerdem rate ich dir, die Daten auch nochmal in der PHP-Datei direkt zu prüfen.
Sonst kann jemand die Daten einfach an die PHP-Datei schicken und sie werden nicht geprüft!
Gruß,
Mckbrother

 

[ddjjmm]

AW: javascript: Funktion zur Formular Überprüfung

Danke für die Hilfestellungen

Hab's nun wie folgt umgesetzt:

<script type="text/javascript">
    function chkWebToLeadForm () {
        if (document.WebToLeadForm.webtolead_email1.value == "") {
            alert("Bitte Ihre E-Mail-Adresse eingeben!");
            document.WebToLeadForm.webtolead_email1.focus();
        return false;
    }
        reg = new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+    //Name
                                    '(\\@)'+                       //@-Zeichen
                                    '([a-zA-Z0-9\\-\\.]+)'+        //Domain
                                    '(\\.)'+                       //Punkt
                                    '([a-zA-Z]{2,4})$');           //TLD
        if(reg.test(document.WebToLeadForm.webtolead_email1.value) == false){
            alert("Die eingegebene E-Mail-Adresse hat ein falsches Format!");
            document.WebToLeadForm.webtolead_email1.focus();
        return false;
        }
    }
</script>

<form name="WebToLeadForm" action="http://www.servername.de/webtools/sugarcrm3/index.php?entryPoint=WebToLeadCapture"
  method="post" id="WebToLeadForm" onsubmit="return chkWebToLeadForm()">
  <pre>
E-Mail:   <input id="webtolead_email1" type="text" size="30" name="webtolead_email1" border="1" style="color: #3287DA; font-family: Verdana; font-size: 12px; background-color: #F5F5F5; border-color: #3287DA">
Formular: <input type="submit" value="Absenden">
    <input id="last_name" name="last_name" type="hidden" value="Interessent Opt-In">
    <input id="campaign_id" name="campaign_id" value="12345" type="hidden"> 
    <input id="assigned_user_id" name="assigned_user_id" value="54321" type="hidden">
</pre>
</form>

@mckbrother: Ich geh davon aus, dass dein Einwand noch nicht berücktsichtig wurde. Versteh ich das richtig, dass du meinst, die Eingaben müssten zusätzlich dann noch in der /index.php?entryPoint=WebToLeadCapture geprüft werden?

Viele Grüße

 

[Myhar]

AW: javascript: Funktion zur Formular Überprüfung

Danke für die Hilfestellungen

@mckbrother: Ich geh davon aus, dass dein Einwand noch nicht berücktsichtig wurde. Versteh ich das richtig, dass du meinst, die Eingaben müssten zusätzlich dann noch in der /index.php?entryPoint=WebToLeadCapture geprüft werden?

Viele Grüße

Irgendwo Backendseitig sollten die Eingaben auf alle Fälle nochmal überprüfen. Man kann ja lokal Änderungen vornehmen, soviel man will und mit uers-JS beliebige Werte für dein Formular abschicken.
Validierung eines Formulars mittels JS sollte nur zur Unterstützung eingesetzt werden, damit das Formular nicht unnötig abgeschickt wird. Für User ohne JS sollte trotzdem eine Möglichkeit bestehen, das Formular abzuschicken.

L. G.