Javascript form validation only works in firefox

Question

I am relatively new to Javascript, so I hope this is a simple mistake. I am creating a generic form validation function that is invoked on onSubmit form. The function goes through all the child elements of the form, searches for specific classes and analyzes the contents of the corresponding fields. If it detects something missing or erroneous, it displays the corresponding error message and returns false, thereby preventing the form from being submitted to the php page.

It works fine in Firefox 3.6.3, but in every other browser I tested (Safari 4.0.4, Chrome 4.1, IE8), it seems to ignore onSubmit and go directly to the php processing page.

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

, , . , , .

Answer 1

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

, required <fieldset>.

Fieldset form.elements IE, Firefox Opera, WebKit (Chrome, Safari). , .

, <fieldset> elements. DOM 2 HTML , , HTML4, , , , .

, , getElementsByTagName :

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

Answer 2

hasClass. , :

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

, IE , . , .

Answer 3

- JavaScript, false, .

< http://www.javascriptlint.com/online_lint.php][1], .

Answer 4

if (errors > 0)... ( ) put return false; , true; :

onSubmit="return validateRequired(this)"

( var)

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

Answer 5

, , .

, , , , "" ; , , . , . :)

W3C:

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

"on", "on" undefined. . , RFC 1866 ([RFC1866]      8.1.2.4), :

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.

, , , "on".

Answer 6

: , ", onsubmit". , :

• -
• , , true

, , , , , , , , IE - , ( ).

I would also like to warn the return value from the place where it was called to see what is returned. If this is always the case, then your code works, but does not do what you think.

From there, you at least understand more clearly what happens if not the exact block of code that needs to be carefully studied.