JavaScript表单验证仅在Firefox中起作用

Question

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

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

我知道这是很多代码，但是任何帮助都将不胜感激。由于它在一个浏览器中正常工作，因此我不确定如何开始调试。谢谢安德鲁

Answer 1

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

问题是你 required 和其他课程上 <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

我不会使用大班级。这是另一种尝试可能对您更好的方法：

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管理 首先，然后是调试器。

Answer 4

尝试不使用if（错误> 0）...仅在每个条件下（对于错误输入）put返回false;最后，在最后一个括号归还返回之前；更好的使用：

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”的，则用于选择最初的“控制”的用户代理行为是未定义的。笔记。由于现有的实施情况以不同的方式处理这种情况，因此当前规范与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”。这留下了我能想到的三种可能性：

1. 您的功能从未被调用
2. 它被称为，并且由于错误而轰炸了一部分
3. 它被称为，并且不做您认为的事情，总是返回真实

从您的问题中不清楚的是，如果我是您，您将开始通过在功能开始时提示来调试此问题，以查看IE是否在调用它 - 然后将其移动到警报并再次运行验证，看看它停止出现的位置（任何错误都必须高于该点）。

我还想提醒从被称呼的地方的回报值，以查看即将到来的内容。如果总是正确的，那么您的代码就可以正常工作，但不做您认为确实如此的事情。

从那里，您至少对正在发生的事情有更清晰的掌握，即使不是确切的代码块要审查。