JavaScript Form convalida funziona solo in Firefox

Question

Sono relativamente nuovo per Javascript quindi spero che questo è un semplice errore. Ho la costruzione di una funzione di validazione forma generica che viene chiamato sul onSubmit del form. La funzione scorre tutti gli elementi figlio della maschera, cerca alcune classi, e analizza il contenuto dei campi appropriati. Se trova qualcosa che manca o mancanti, viene visualizzato il messaggio di errore appropriata div e ritorna falso, impedendo così la forma di essere sottoposto alla pagina PHP.

Funziona bene in Firefox 3.6.3, ma in ogni altro browser che ho provato (Safari 4.0.4, Chrome 4.1, IE8) sembra ignorare l'onSubmit e saltare direttamente alla pagina di elaborazione php.

HTML codice:

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

Il codice JavaScript:

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

So che questo è un sacco di codice da guardare, ma qualsiasi aiuto sarebbe apprezzato. Dal momento che funziona bene in un browser, non sono sicuro di come avviare il debug. Grazie Andrew

Answer 1

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

Il problema è che il vostro required e le altre classi sono messi sull'elemento <fieldset>.

elementi FIELDSET sono inclusi nella collezione form.elements su IE, Firefox e Opera, ma non Webkit browser (Chrome, Safari). Sono questi i browser in cui il modulo non riesce per me.

E 'sempre stato un capriccio strano che <fieldset> è stato incluso nella collezione elements. Il DOM Level 2 HTML spec afferma che dovrebbero essere presenti nella collezione solo 'elementi di controllo di forma', e da di HTML4 definizione che sembrerebbe non includere fieldsets, che non hanno nome del controllo o valore.

Si potrebbe forse cambiare il codice per utilizzare getElementsByTagName a raccogliere i fieldsets invece:

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

Answer 2

Non userebbe hasClass. Ecco un altro modo per provare che il lavoro potrebbe meglio per voi:

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

So che IE ha problemi nel trovare le classi da parte di alcuni elementi che hanno più classi ad essi associati. Indipendentemente da ciò, questo è una funzione utile.

Answer 3

Se avete qualsiasi tipo di errore JavaScript, la funzione non restituisce false, e quindi verrà attivato il comportamento predefinito di presentare i dati.

Provare a eseguire il codice attraverso [ http://www.javascriptlint.com/online_lint .php] [1] , poi un debugger.

Answer 4

cercare di non utilizzare se (errori> 0) ... giusto in ogni condizione (per l'ingresso sbagliato) put return false; e alla fine prima che l'ultimo staffa messo return true; e un uso migliore:

onSubmit="return validateRequired(this)"

e non v'è alcuna necessità in questo linee (nel caso in cui si rimuove l'errori var)

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

Answer 5

Non è la causa del problema, sono sicuro, ma è meglio non servire una serie di pulsanti radio senza che uno di loro selezionati.

Nel vostro caso particolare, se si sa che si imposta uno quando si servono della pagina, non c'è bisogno di una "richiesta" di controllo; non c'è modo l'utente può ottenere i pulsanti di scelta in uno stato dove non vengono selezionati. Scegliere un default ragionevole, ne fanno la prima opzione, e renderlo selezionato. Semplifica la tua vita:)

Dal W3C:

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

  

Se nessun pulsante di opzione in un set di condivisione   lo stesso nome di controllo è inizialmente   "On", il comportamento user agent per la scelta   cui il controllo è inizialmente "a" è   non definito. Nota. Dal momento esistente   implementazioni gestire questo caso   diversamente, la specifica   differisce da RFC 1866 ([RFC1866]       sezione 8.1.2.4), in cui si afferma:

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 diverso comportamento agente utente,   autori devono garantire che in ogni set   di pulsanti di opzione che uno è inizialmente   "On".

Answer 6

Back to basics per un secondo: Tu dici che "sembra ignorare onsubmit". Che lascia tre possibilità che mi viene in mente:

1. La vostra funzione non viene mai chiamato
2. Si chiama, e sta bombardando fuori part-strada attraverso causa di un errore
3. Si chiama, e non sta facendo quello che si pensa che è, sempre restituendo vero

Non è chiaro dalla tua domanda, che è, quindi se fossi in te mi piacerebbe iniziare il debug questo mettendo un avviso all'inizio della funzione per vedere se IE di chiamarla a tutti - quindi spostare tale avviso il basso e corsa ancora una volta la convalida, e vedere dove non viene più visualizzato (ogni errore deve essere al di sopra quel punto).

mi piacerebbe anche voler avvisare il valore di ritorno dal luogo è stato chiamato, per vedere cosa stava tornando. Se è sempre vero, allora il codice funziona, ma non fare quello che pensi lo fa.

Da lì, è almeno avere una comprensione più chiara di quello che sta succedendo, se non un blocco esatto di codice da scrutare.