Javascript Formularvalidierung funktioniert nur in Firefox

Question

Ich bin relativ neu in Javascript, so hoffe ich, dies ein einfacher Fehler ist. I Aufbau eine generische Form Validierungsfunktion, die auf der Form der onSubmit genannt wird. Die Funktion durchläuft alle untergeordneten Elemente des Formulars, sieht für bestimmte Klassen, und analysiert die Inhalte der entsprechenden Felder ein. Wenn es etwas fehlt oder fehlerhaft findet, zeigt die entsprechende Fehlermeldung div und gibt false zurück, so dass die Form zu verhindern, dass auf die PHP-Seite eingereicht werden.

Es funktioniert gut in Firefox 3.6.3, aber in jedem anderen Browser habe ich getestet (Safari 4.0.4, Chrome 4.1, IE8) scheint es die onSubmit und springt direkt in der PHP-Verarbeitung Seite zu ignorieren.

HTML-Code:

    <form name='myForm' id='myForm' action='process_form.php' method='post' onSubmit="return validateRequired('myForm')">

   <fieldset class="required radioset">
    <label for='selection1'>
     <input type='radio' name='selection' id='selection1' value='1'/>
     Option 1
    </label>
    <label for='selection2'>
     <input type='radio' name='selection' id='selection2' value='2'/>
     Option 2
    </label>
    <label for='selection3'>
     <input type='radio' name='selection' id='selection3' value='3'/>
     Option 3
    </label>
    <label for='selection4'>
     <input type='radio' name='selection' id='selection4' value='4'/>
     Option 4
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please make a selection
    </div>
   </fieldset>

   <fieldset class="required checkset">
    <label>
     Choice 1
     <input type='checkbox' name='choices' id='choice1' value='1'/>
    </label>
    <label>
     Choice 2
     <input type='checkbox' name='choices' id='choice2' value='2'/>
    </label>
    <label>
     Choice 3
     <input type='checkbox' name='choices' id='choice3' value='3'/>
    </label>
    <label>
     Choice 4
     <input type='checkbox' name='choices' id='choice4' value='4'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please choose at least one
    </div>
   </fieldset>


   <fieldset class="required textfield" >
    <label for='textinput1'>
     Required Text:
     <input type='text' name='textinput1' id='textinput1' size='40'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please enter some text
    </div>
   </fieldset>

   <fieldset class="required email textfield">
    <label for='email'>
     Required Email:
     <input type='text' name='email' id='email' size='40'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     The email address you have entered is invalid
    </div>
   </fieldset>


   <div>
    <input type='submit' value='submit'>
    <input type='reset' value='reset'>
   </div>

  </form>

JavaScript-Code:

    function validateRequired(id){

 var form = document.getElementById(id);
 var errors = 0;
 var returnVal = true;
 for(i = 0; i < form.elements.length; i++){
  var elem = form.elements[i];
  if(hasClass(elem,"required")){

   /*RADIO BUTTON or CHECK BOX SET*/
   if(hasClass(elem,"radioset") || hasClass(elem,"checkset")){
    var inputs = elem.getElementsByTagName("input");
    var check = false;
    for(j = 0; j < inputs.length; j++){
     if(inputs[j].checked){
      check = true;
     }
    }
    if(check == false){
     errors += 1;
     showError(elem);
    } else {
     hideError(elem);
    }
   }

   /*TEXT FIELD*/
   else if(hasClass(elem,"textfield")){
    var input = elem.getElementsByTagName("input");
    if(input[0].value == ""){
     errors += 1;
     showError(elem);
    } else {
     hideError(elem);

     /*EMAIL ADDRESS*/
     if(hasClass(elem,"email")){
      if(isValidEmail(input[0].value) == false){
       errors += 1;
       showError(elem);
      } else {
       hideError(elem);
      }
     }
    }
   }
  }
 }
 if(errors > 0){
  returnVal = false;
 } else {
  returnVal = true;
 }
 return returnVal;}

Ich weiß, das ist eine Menge Code zu sehen, aber jede Hilfe würde geschätzt. Da es in Ordnung in einem Browser funktioniert, Ich bin nicht sicher, wie das Debuggen zu starten. Vielen Dank Andrew

Answer 1

for(i = 0; i < form.elements.length; i++){
    var elem = form.elements[i];
    if(hasClass(elem,"required")){

Das Problem ist, dass Ihre required und andere Klassen auf dem <fieldset> Elemente gesetzt werden.

Fieldset Elemente sind in der form.elements Sammlung auf IE, Firefox und Opera enthält, aber nicht WebKit-Browser (Chrome, Safari). Es ist dieser Browser in dem Formular für mich nicht.

Es ist schon immer eine seltsame Marotte, dass <fieldset> in der elements Sammlung enthalten war. Die DOM Level 2 HTML spec Staaten, die nur ‚Form Steuerelemente‘ sollten in der Sammlung vorhanden sein und durch HTML4 Definition dass scheint nicht Fieldset zu enthalten, die keine Kontrolle Namen oder Wert haben.

Sie könnten vielleicht Ihren Code zu verwenden getElementsByTagName ändern Sie die Field abholen statt:

var fieldsets= form.getElementsByTagName('fieldset');
for (var i= 0; i<fieldsets.length; i++) {
    var elem= fieldsets[i];

Answer 2

Ich würde nicht hasClass verwenden. Hier ist eine andere Art und Weise, dass die Macht der Arbeit besser für Sie, um zu versuchen:

var node_list = document.getElementsByTagName('input');
for (var i = 0; i < node_list.length; i++) {
    var node = node_list[i];

    if (node.getAttribute('type') == 'text') {
        // do something here with a <input type="text" .../>
        alert(node.value);
    }
} 

Ich weiß, dass IE Probleme bekommen die Klassen aus einigen Elementen aufweist, die mit ihnen verbunden sind mehrere Klassen haben. Egal, das ist eine praktische Funktion.

Answer 3

Wenn Sie jede Art von JavaScript-Fehler haben, wird die Funktion nicht false zurück, und damit das Standardverhalten der bezogener Daten ausgelöst.

Versuchen Sie Ihren Code durch [ http://www.javascriptlint.com/online_lint läuft .php] [1] zuerst, dann ein Debugger.

Answer 4

versuchen, nicht zu verwenden, wenn (Fehler> 0) ... nur in jedem Zustand (bei fehlerhafter Eingabe) Put-return false; und am Ende vor der letzten Klammer setzte return true; und eine bessere Nutzung:

onSubmit="return validateRequired(this)"

, und es gibt keine Notwendigkeit, in diesen Zeilen (falls Sie den Fehler var entfernen)

 var form = document.getElementById(id);
 var errors = 0;
 var returnVal = true;

Answer 5

Nicht die Ursache des Problems, ich bin sicher, aber es ist am besten nicht eine Reihe von Radio-Buttons ohne einen von ihnen ausgewählt zu dienen.

In Ihrem speziellen Fall, wenn Sie wissen, dass Sie ein Set, wenn Sie die Seite dienen, Sie brauchen nicht zu einem „erforderlich“ Kontrolle; es gibt den Benutzer keine Möglichkeit, die Radio-Buttons in einen Zustand zu bekommen, wo keine ausgewählt sind. Wählen Sie eine sinnvolle Standard, machen es die erste Option, und machen es ausgewählt. Simplify your life:)

Aus dem W3C:

http://www.w3.org/TR/html401 /interact/forms.html#radio

Wenn kein Optionsfeld in einem Set-Sharing die gleiche Steuer Name ist zunächst "On", User-Agent-Verhalten für die Wahl die Steuerung zunächst „on“ ist, nicht definiert. Hinweis. da bestehende Implementierungen behandeln diesen Fall anders als, die aktuelle Spezifikation unterscheidet sich von RFC 1866 ([RFC1866] Abschnitt 8.1.2.4), in dem es heißt:

At all times, exactly one of the radio 
buttons in a set is checked. If
none of the <INPUT> elements of a set
of radio buttons specifies `CHECKED',
then the user agent must check the
first radio button of the set
initially.

Da User-Agent-Verhalten unterscheidet sich, Autoren sollen, dass in jedem Satz gewährleisten zunächst von Optionsfeldern, dass man "On".

Answer 6

Zurück zu den Wurzeln für eine Sekunde: Sie sagen, es „scheint die onsubmit zu ignorieren“. Das lässt drei Möglichkeiten, die ich denken kann:

1. Ihre Funktion wird nie genannt
2. Es heißt, und die Bombardierung aus Teil Weg durch aufgrund eines Fehlers
3. Es heißt, und tun, ist nicht das, was Sie denken, es ist immer wahr Rückkehr

Es ist nicht von Ihrer Frage zu klären, die es ist, also, wenn ich Sie bin ich anfangen würde das Debuggen von einer Warnung zu Beginn der Funktion setzen, um zu sehen, ob IE es überhaupt anrufen - dann diesen Alarm nach unten bewegen und laufen die Validierung wieder, und sehen, wo es nicht mehr erscheinen (jeder Fehler über diesem Punkt sein muss).

Ich würde auch den Rückgabewert von dem Ort alarmieren will es genannt wurde, zu sehen, was zurückkommen würde. Wenn es immer wahr ist, dann ist Ihr Code funktioniert, aber nicht zu tun, was Sie denken, es tut.

Von dort Sie zumindest ein klareres Verständnis von dem, was vor sich geht, wenn keine exakte Codeblock zu prüfend.