3

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

我知道这是很多代码要看，但任何帮助将不胜感激。由于它在一个浏览器中运行良好，我不确定如何开始调试。谢谢安德鲁

4

6 回答 6

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

问题是您required和其他类都放在<fieldset>元素上。

Fieldset 元素包含在form.elementsIE、Firefox 和 Opera 的集合中，但不包括 WebKit 浏览器（Chrome、Safari）。正是这些浏览器，您的表单对我来说失败了。

<fieldset>收藏中一直有一个奇怪的怪癖elements。DOM Level 2 HTML规范规定只有“表单控件元素”应该存在于集合中，并且根据HTML4 的定义，它似乎不包括没有控件名称或值的字段集。

您也许可以更改代码以用于getElementsByTagName获取字段集：

var fieldsets= form.getElementsByTagName('fieldset');
for (var i= 0; i<fieldsets.length; i++) {
    var elem= fieldsets[i];
于 2010-05-28T18:25:03.093 回答
1

我不会使用 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 在从某些元素中获取类时遇到问题，这些元素有多个与之关联的类。无论如何，这是一个方便的功能。

于 2010-05-28T18:33:29.430 回答
0

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

尝试首先通过 [ http://www.javascriptlint.com/online_lint.php][1]运行您的代码，然后是调试器。

于 2010-05-28T18:11:27.883 回答
0

尽量不要使用 if(errors > 0)...只是在每种情况下（对于错误的输入） put return false; 并在最后一个括号之前的最后放置返回true；更好的使用：

onSubmit="return validateRequired(this)"

并且这行不需要（如果您删除了错误变量）

 var form = document.getElementById(id);
 var errors = 0;
 var returnVal = true;
于 2010-05-28T18:12:08.710 回答
0

我敢肯定，这不是您的问题的原因，但最好不要在没有选择其中一个的情况下提供一组单选按钮。

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

来自 W3C：

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

如果在一组共享相同控件名称的单选按钮中没有最初为“on”的单选按钮，则用于选择最初为“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.

由于用户代理行为不同，作者应确保在每组单选按钮中，一个最初是“打开”的。

于 2010-05-28T18:36:37.210 回答
0

回到基础一秒钟：您说它“似乎忽略了 onsubmit”。这留下了我能想到的三种可能性：

  1. 你的函数永远不会被调用
  2. 它被调用，并且由于错误而在中途轰炸
  3. 它被调用，并没有按照你的想法做，总是返回 true

从你的问题中不清楚它是什么，所以如果我是你，我会通过在函数的开头放置一个警报来开始调试它，以查看 IE 是否在调用它 - 然后将该警报向下移动并再次运行验证，并查看它停止出现的位置（任何错误都必须高于该点）。

我还想从它被调用的地方提醒返回值，看看返回了什么。如果它总是正确的，那么你的代码正在工作，但没有按照你的想法做。

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

于 2010-05-28T19:14:39.660 回答