Javascript Formvalidation im IE

Diskutiere das Thema Javascript Formvalidation im IE im Forum Web-Programmierung

  1. balufreak

    balufreak Thread Starter Mitglied

    Beiträge:
    1.562
    Zustimmungen:
    28
    Mitglied seit:
    12.10.2003
    So habe wieder mal ein Problem. Wie immer mit dem Internet Explorer.
    Ich habe folgendes Formular
    Code:
    <form name="ac" action="{$base_url}/addresscontact/mail/{$mailid}" method="post" onSubmit="return addressContactFormValidate(this)">
    <label for="sender">Ihre E-Mailadresse:<sup style="font-size:10px;">*</sup></label>
    <input type="text" name="sender" id="sender" />
    <label for="subject">Betreff:<sup style="font-size:10px;">*</sup></label>
    <input type="text" name="subject" id="subject"/>
    <label for="message">Nachricht:<sup style="font-size:10px;">*</sup></label>
    <textarea name="message" rows="10" id="message"></textarea>
    <label for="captcha">Antispam: Summe aus {$captcha_1} und {$captcha_2}:<sup style="font-size:10px;">*</sup></label>
    <input type="text" name="captcha" id="captcha"/>
    <input type="submit" name="senden" value="Senden" /> 
    </form>
    
    Den onSubmit Event wird beim Internet Explorer nicht ausgelöst.
    Wenn ich die selbe funktion auf den onclick event des Submit-Buttons setze, funktioniert es ebenfalls nicht.
    Wie geht das mit diesem versch****** Internet Explorer?

    greets
     
  2. somunium

    somunium Mitglied

    Beiträge:
    326
    Zustimmungen:
    35
    Mitglied seit:
    16.01.2008
    Wie sieht denn die JavaScript-Funktion aus?
     
  3. wegus

    wegus Mitglied

    Beiträge:
    16.048
    Zustimmungen:
    2.648
    Mitglied seit:
    13.09.2004
    der Event müßte durchkommen! Ersetz den Inhalt der Funktion doch mal durch einen schlichten Alert(), der sollte dann auch kommen!

    Grundsätzlich empfiehlt sich bei Javascript ein Debugger/eine Konsole. Beides in Firefox und in Opera vorhanden. Spart Zeit und Nerven!
     
  4. balufreak

    balufreak Thread Starter Mitglied

    Beiträge:
    1.562
    Zustimmungen:
    28
    Mitglied seit:
    12.10.2003
    Das ist mir schon klar. Aber wenn es im Firefox und Opera funktioniert, kann ich das schlecht debuggen ;)

    Das Javascript beinhaltet folgendes.
    Code:
    function addressContactFormValidate(frm) {
      var e = '<ul>';
      var isError = false;
      
      /*
      var s  = document.getElementById('sender').value;
      var sj = document.getElementById('subject').value;
      var m  = document.getElementById('message').value;
      var c  = document.getElementById('captcha').value;
      */
      
      var s = frm.sender.value;
      var sj = frm.subject.value;
      var m = frm.subject.value;
      var c = frm.captcha.value;
      
      if(! isValidEmail(s)) {
        isError = true;
        e = e + '<li>Keine gültige E-Mailadresse angegeben.</li>';
      }
      
      if(sj.length == 0) {
        isError = true;
        e = e + '<li>Kein Betreff angegeben.</li>';
      }
      
      if(m.length == 0) {
        isError = true;
        e = e + '<li>Keine Nachricht eingegeben.</li>';
      }
      
      if(c.length == 0) {
        e = e + '<li>Die Antispam-Aufgabe wurde nicht gelöst.</li>';
      }
      
      e = e + '</ul>';
      
      if(isError) { 
        document.getElementById('form_error').innerHTML = e;
        document.getElementById('form_error').setAttribute('style','');
        return false;
      }
      return true;
    }
    
     
  5. dms

    dms

    Hast Du es mal mit einem einfachen alert() versucht?

    Falls das auch nicht funktioniert, würde ich das onsubmit mal valide, sprich alles klein, schreiben: onsubmit statt onSubmit. Vlt. erkennt er es so nicht als gültigen Handler an, was sogar korrekt wäre.

    Ansonsten würde ich in der Funktion eher mit appendChild anstatt mit innerHTML arbeiten. Nach W3C-Standard dürfte innerHTML meines Wissens nach in einem XHTML-Dokument nicht einmal funktionieren. Tut es zwar, aber es ist alle mal sauberer.
     
  6. balufreak

    balufreak Thread Starter Mitglied

    Beiträge:
    1.562
    Zustimmungen:
    28
    Mitglied seit:
    12.10.2003
    Also ich habe es mal mit alert() versucht. die Meldung kommt.
    Meine JavaScript Funktion sieht jetzt mal so aus.
    Code:
    function addressContactFormValidate(frm) {
      alert('IE');
      var isError = false;
      if(document.getElementById('form_error').hasChildNodes()) {
        document.getElementById("form_error").removeChild(document.getElementById("form_error").firstChild);
      }
      var e = document.createElement('ul');
      e.setAttribute('id','error_msgs');
      document.getElementById('form_error').appendChild(e);
      
      /*
      var s  = document.getElementById('sender').value;
      var sj = document.getElementById('subject').value;
      var m  = document.getElementById('message').value;
      var c  = document.getElementById('captcha').value;
      */
      
      var s = frm.sender.value;
      var sj = frm.subject.value;
      var m = frm.subject.value;
      var c = frm.captcha.value;
      
      if(! isValidEmail(s)) {
        isError = true;
    	var newLi = document.createElement('li');
    	var txt = document.createTextNode('Keine gültige E-Mailadresse angegeben.');
    	newLi.appendChild(txt);
    	document.getElementById('error_msgs').appendChild(newLi);
      }
      if(sj.length == 0) {
        isError = true;	
    	var newLi = document.createElement('li');
    	var txt = document.createTextNode('Kein Betreff angegeben.');
    	newLi.appendChild(txt);
    	document.getElementById('error_msgs').appendChild(newLi);
      }
      
      if(m.length == 0) {
        isError = true;
    	var newLi = document.createElement('li');
    	var txt = document.createTextNode('Keine Nachricht eingegeben.');
    	newLi.appendChild(txt);
    	document.getElementById('error_msgs').appendChild(newLi);
      }
      
      if(c.length == 0) {
    	var newLi = document.createElement('li');
    	var txt = document.createTextNode('Die Antispamaufgabe wurde nicht gelöst.');
    	newLi.appendChild(txt);
    	document.getElementById('error_msgs').appendChild(newLi);
      }
      if(isError) { 
        document.getElementById('form_error').setAttribute('style','');
        return false;
      }
      return true;
    }
    
    Die Meldung kommt zwar, aber das Formular wird nicht validiert.
     
  7. wegus

    wegus Mitglied

    Beiträge:
    16.048
    Zustimmungen:
    2.648
    Mitglied seit:
    13.09.2004
    da hilft nur gutes altes printf-Debugging, sprich verteil ein paar Alertboxen und guck was nicht ausgeführt wird!
     
  8. 2nd

    2nd Mitglied

    Beiträge:
    9.009
    Zustimmungen:
    242
    Mitglied seit:
    25.07.2004
    Ich möchte noch anmerken, dass die Validierung von Formularen nur aus Usability-Gründen höchstens zusätzlich zur serverseitigen Überprüfung (PHP, Ruby, Java etc.) per JS erfolgen sollte.

    Warum?

    • Klienten können JS deaktiviert haben
    • Spambots sind eh ohne bzw. mit nur eingeschränkter JS-Funktionalität unterwegs und schicken die Daten in jedem Fall weg

    Diese Art von Validierung bietet also höchstens einen Zusatznutzen für menschliche Nutzer, da kein neuer Seitenrequest generiert wird. Nach dem Request mit Übermittlung der Daten per $_POST muss in jedem Fall eine erneute Überprüfung auf dem Server stattfinden, alles andere wäre ziemlich fahrlässig ;)

    Aber vielleicht ist dies ja alles schon längst in die Konzeption einbezogen worden :noplan:

    2nd
     
  9. wegus

    wegus Mitglied

    Beiträge:
    16.048
    Zustimmungen:
    2.648
    Mitglied seit:
    13.09.2004
    JSF, ein Komponentenframework für Java-Webapps arbeitet da zweistufig! Auf dem Client findet mittels Javascript eine Validierung statt und beim Übertragung wird mittels eines Converters auf dem Server ein passender Datentyp erzwungen.

    Das ist Komfort für die human beings, reduziert Eingabefehler und es funktioniert auch noch wenn JS aus ist. Ich halte die Trennung in eine Javascript Eingabehilfe und eine letztlich gültige Validierung auf dem Server für die optimale Version.

    Die Aussage Clienten könnten JS aus haben nimmt aber täglich an Unwahrscheinlichkeit zu. Nahezu keine Webseite funktioniert mehr Ohne. Zumal seit ständig AJAX gehyped wird.
     
  10. balufreak

    balufreak Thread Starter Mitglied

    Beiträge:
    1.562
    Zustimmungen:
    28
    Mitglied seit:
    12.10.2003
    @2ndreality: Jap das ist so. Das ist in der konzeption so miteinbezogen. Die Javascript validierung ist reine usability.

    Ich habe den Fehler gefunden.
    Der IE kennt anscheinend
    Code:
    document.getElementById('form_error').setAttribute('style','');
    nicht.
    Man muss folgendes machen:
    Code:
    document.getElementById('form_error').style.display = 'inline';
     
Die Seite wird geladen...
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...