Javascript Formvalidation im IE

[balufreak]

So habe wieder mal ein Problem. Wie immer mit dem Internet Explorer.
Ich habe folgendes Formular

<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

 

[somunium]

Wie sieht denn die JavaScript-Funktion aus?

 

[wegus]

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!

 

[balufreak]

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

Das ist mir schon klar. Aber wenn es im Firefox und Opera funktioniert, kann ich das schlecht debuggen

Das Javascript beinhaltet folgendes.

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

 

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

 

[balufreak]

Also ich habe es mal mit alert() versucht. die Meldung kommt.
Meine JavaScript Funktion sieht jetzt mal so aus.

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.

 

[wegus]

Das ist mir schon klar. Aber wenn es im Firefox und Opera funktioniert, kann ich das schlecht debuggen

da hilft nur gutes altes printf-Debugging, sprich verteil ein paar Alertboxen und guck was nicht ausgeführt wird!

 

[2nd]

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

2nd

 

[wegus]

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.

 

[balufreak]

@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

document.getElementById('form_error').setAttribute('style','');

nicht.
Man muss folgendes machen:

document.getElementById('form_error').style.display = 'inline';

 

[dms]

Macht auch irgendwo Sinn. style ist ja ein Objekt und ich frag mich gerade wie das in anderen Browsern funktionieren kann. Werden durch die Angabe wirklich sämtliche Inline-Style-Eigenschaften gelöscht (also in Firefox/Opera)? Oder ist der IE nur der einzige der dabei eine Exception schmeisst? Reine Neugier.