Javascript表单验证仅在firefox中有效

我对Javascript比较陌生，所以我希望这是一个简单的错误。我正在构建一个通用表单验证函数，该函数在表单的onSubmit上调用。该函数遍历表单的所有子元素，查找某些类，并分析相应字段的内容。如果发现缺少或错误，它将显示相应的错误消息div并返回false，从而防止表单提交到php页面

它在firefox 3.6.3中运行良好，但在我测试过的所有其他浏览器（Safari 4.0.4、Chrome 4.1、IE8）中，它似乎都忽略了onSubmit，直接跳转到php处理页面

HTML代码：

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

选择1
选择2
选择3
选择4
请选择
选择1
选择2
选择3
选择4
请至少选择一个
所需文本：
请输入一些文本
所需电子邮件：
您输入的电子邮件地址无效

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

所需的函数验证（id）{
var form=document.getElementById（id）；
var误差=0；
var returnVal=true；
对于（i=0；i0）{
returnVal=false；
}否则{
returnVal=true；
}
returnVal；}

我知道这是一个看很多代码，但任何帮助将不胜感激。由于它可以在一个浏览器中正常工作，我不知道如何开始调试。 谢谢

---

Andrew

如果您有任何类型的JavaScript错误，函数将不会返回false，因此将触发提交数据的默认行为

尝试通过[首先，然后是调试器]运行代码。

尝试不使用if（errors>0）…只是在每种情况下（对于错误输入），put return false； 并在最后一个括号前放回true； 更好地使用：

onSubmit="return validateRequired(this)"

在这行中没有必要（如果您删除了errors var）

---

我不会使用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);
    }
} 

var node_list=document.getElementsByTagName（'input'）；
对于（变量i=0；i

---

我知道IE从一些元素中获取类时遇到问题，这些元素有多个与之关联的类。无论如何，这是一个方便的功能。

我确信这不是问题的原因，但最好不要在没有选择一个单选按钮的情况下提供一组单选按钮

在您的特定情况下，如果您知道在提供页面时设置了单选按钮，则不需要进行“必需”检查；用户无法使单选按钮处于未选中的状态。选择一个合理的默认值，将其作为第一个选项，并将其选中。简化您的生活：）

来自W3C：

如果集合中没有单选按钮，则共享 最初使用相同的控件名 “on”，用户代理选择的行为 哪个控件最初处于“打开”状态是 未定义。注意。因为存在 实现可以处理这种情况 不同的是，当前的规范 不同于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.

在任何时候，都是一台收音机
已选中集合中的按钮。如果
集合中的任何元素
单选按钮的数量指定“选中”，
然后，用户代理必须检查
设置的第一个单选按钮
起初。

由于用户代理行为不同， 作者应确保在每一组中 一开始使用的单选按钮 “开”

---

回到最基本的一秒钟：你说它“似乎忽略了问题”。这就留下了三种可能性，我可以想到：

永远不会调用您的函数

它被称为，由于一个错误，正在炸出一部分

它被称为，并没有做你认为它是，总是返回真实的

你的问题不清楚它是哪一个，所以如果我是你，我会在函数的开头放一个警报，看看IE是否在调用它，然后向下移动警报，再次运行验证，看看它在哪里停止出现（任何错误都必须在该点以上）

我还想提醒从调用它的地方返回的值，以查看返回的内容。如果它总是正确的，那么您的代码正在工作，但没有按照您认为的那样工作

---

从那以后，您至少可以更清楚地了解正在发生的事情，如果不是要仔细检查的确切代码块的话。

谢谢，我不确定这是否有效，因为我必须在返回前循环检查表单的所有元素，否则它只会显示它得到的第一个错误。这就是为什么我将返回放在末尾。有意义吗？您可以确定eep<代码>错误

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

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

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.