Javascript：表單驗證getElementById只返回第一個id元素

我的表單驗證腳本似乎正在運行，但getElementById只是讀取第一個ID並且由於某種原因跳過其餘的ID。是否由於封閉標籤問題？如果是的話，我把他們放在哪裏？還是我以某種方式忽略了另一個原因。請幫助:(Javascript：表單驗證getElementById只返回第一個id元素

我感謝所有幫助，我在這個一直盯着好幾天了。這裏是代碼。

的JS代碼。

<script type='text/javascript'> 

     function formValidator(){ 
      // Make quick references to our fields 
      var name = document.getElementById('name'); 
      var addr = document.getElementById('addr'); 
      var phone = document.getElementById('phone'); 
      var state = document.getElementById('state'); 
      var username = document.getElementById('username'); 
      var email = document.getElementById('email'); 

      // Check each input in the order that it appears in the form! 
      if(isAlphabet(name, "Please enter only letters for your name")){ 
       if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ 
        if(isNumeric(phone, "Please enter only numeric values without any dashes")){ 
         if(madeSelection(state, "Please Choose a State")){ 
          if(lengthRestriction(username, 6, 8)){ 
           if(emailValidator(email, "Please enter a valid email address")){ 
            return true; 
           } 
          } 
         } 
        } 
       } 
      } 


      return false; 

     } 

     function notEmpty(elem, helperMsg){ 
      if(elem.value.length == 0){ 
       alert(helperMsg); 
       elem.focus(); // set the focus to this input 
       return false; 
      } 
      return true; 
     } 

     function isNumeric(elem, helperMsg){ 
      var numericExpression = /^[0-9]+$/; 
      if(elem.value.match(numericExpression)){ 
       return true; 
      }else{ 
       alert(helperMsg); 
       elem.focus(); 
       return false; 
      } 
     } 

     function isAlphabet(elem, helperMsg){ 
      var alphaExp = /^[a-zA-Z]+$/; 
      if(elem.value.match(alphaExp)){ 
       return true; 
      }else{ 
       alert(helperMsg); 
       elem.focus(); 
       return false; 
      } 
     } 

     function isAlphanumeric(elem, helperMsg){ 
      var alphaExp = /^[0-9a-zA-Z]+$/; 
      if(elem.value.match(alphaExp)){ 
       return true; 
      }else{ 
       alert(helperMsg); 
       elem.focus(); 
       return false; 
      } 
     } 

     function lengthRestriction(elem, min, max){ 
      var uInput = elem.value; 
      if(uInput.length >= min && uInput.length <= max){ 
       return true; 
      }else{ 
       alert("Please enter between " +min+ " and " +max+ " characters"); 
       elem.focus(); 
       return false; 
      } 
     } 

     function madeSelection(elem, helperMsg){ 
      if(elem.value == "Select State..."){ 


    alert(helperMsg); 
      elem.focus(); 
      return false; 
     }else{ 
      return true; 
     } 
    } 

    function emailValidator(elem, helperMsg){ 
     var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 
     if(elem.value.match(emailExp)){ 
      return true; 
     }else{ 
      alert(helperMsg); 
      elem.focus(); 
      return false; 
     } 
    } 
    </script>

這裏是表單代碼。

<?php 

// Will not show if submitted once so client cant resubmit over and over again. 
if ($submitted==2) 
{ 
    echo "<a href=\"../\"><h2>[ Return to main menu ]</h2></a>"; 

    // sets variables to a Null string 
    $new_name=''; 
    $new_phone=''; 
    $new_email=''; 
    $new_city=''; 
    $new_state=''; 
    $new_cost=''; 
    $new_info =''; 
} 
else 
{ 

    echo "<div class=\"container\" >"; 
    echo "<div class=\"form_container\" align=\"left\" >"; 
    echo "<h2>Get Listed</h2>"; 
    echo "<i>All required fields are marked with a red asteriks (<font color=\"red\"> * </font>)</i><br/><br/>"; 

    echo "<form action=\"#\" onsubmit=\"return formValidator()\" method=\"post\" >"; 
      echo "<font color=\"red\">*</font>&nbsp;<input type=\"checkbox\" name=\"terms\" value=\"yes\" > 
      Yes, I agree to our <a href=\"../legal/index.php\" target=\"_blank\" > 
      <i>Terms and Conditions</i></a><br/><br/>"; 

      echo "<h2>Limo Service Details</h2>"; 

      echo "<font color=\"red\"/>*</font> Service Name: <br/>"; 
      echo "<input type=\"text\" name=\"in_name\" maxlength=\"60\" size=\"26\" id=\"name\" value='$new_name' >"; 
      echo "<br/>"; 

      echo "<font color=\"red\"/>*</font> Phone: <br/>"; 
      echo "<input type=\"text\" name=\"in_phone\" maxlength=\"60\" size=\"26\" id=\"phone\" value='$new_phone' >";   
      echo "<br/>"; 

      echo "<font color=\"red\"/>*</font> Email: <br/>"; 
      echo "<input type=\"text\" name=\"in_email\" maxlength=\"60\" size=\"26\" id=\"email\" value='$new_email' >";   
      echo "<br/>"; 

      echo "<font color=\"red\">*</font> Cost: <br/>"; 
      echo "<input type=\"text\" name=\"in_cost\" maxlength=\"30\" size=\"11\" value='$new_cost' >";   
      echo "&nbsp;&nbsp;"; 

      echo "<select style=\"width: 120px\" name=\"in_rate\" >"; 
       echo "<option value=\"daily\" selected>Daily</option>"; 
       echo "<option value=\"hourly\">Hourly</option>"; 
       echo "</select>"; 

      echo "<br/>";       

      echo "<font color=\"red\">*</font> City: <select name=\"in_city\" style=\"width: 245px\" >"; 
       echo "<option value=\"\">Select City...</option>"; 
       echo "<option value=\"Atlanta\">Atlanta</option>"; 
       echo "<option value=\"Atlantic City\">Atlantic City</option>"; 
       echo "<option value=\"Austin\">Austin</option>"; 
       echo "<option value=\"Baltimore\">Baltimore</option>"; 
       echo "<option value=\"Boston\">Boston</option>"; 
       echo "<option value=\"Charlotte\">Charlotte</option>"; 
       echo "<option value=\"Chicago\">Chicago</option>"; 
       echo "<option value=\"Cincinnati\">Cincinnati</option>"; 
       echo "<option value=\"Columbus\">Columbus</option>"; 
       echo "<option value=\"Dallas\">Dallas</option>"; 
       echo "<option value=\"Denver\">Denver</option>"; 
       echo "<option value=\"Detroit\">Detroit</option>"; 
       echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>"; 
       echo "<option value=\"Honolulu\">Honolulu</option>"; 
       echo "<option value=\"Houston\">Houston</option>"; 
       echo "<option value=\"Indianapolis\">Indianapolis</option>"; 
       echo "<option value=\"Irvine\">Irvine</option>"; 
       echo "<option value=\"Las Vegas\">Las Vegas</option>"; 
       echo "<option value=\"Los Angeles\">Los Angeles</option>"; 
       echo "<option value=\"Miami\">Miami</option>"; 
       echo "<option value=\"Minneapolis\">Minneapolis</option>"; 
       echo "<option value=\"Nashville\">Nashville</option>"; 
       echo "<option value=\"Newark\">Newark</option>"; 
       echo "<option value=\"New York\">New York</option>"; 
       echo "<option value=\"Oklahoma\">Oklahoma City</option>"; 
       echo "<option value=\"Orlando\">Orlando</option>"; 
       echo "<option value=\"Portland\">Portland</option>"; 
       echo "<option value=\"Philadelphia\">Philadelphia</option>"; 
       echo "<option value=\"Phoenix\">Phoenix</option>"; 
       echo "<option value=\"Raleigh\">Raleigh</option>"; 
       echo "<option value=\"Sacramento\">Sacramento</option>"; 
       echo "<option value=\"Salt Lake City\">Salt Lake City</option>"; 
       echo "<option value=\"San Antonio\">San Antonio</option>"; 
       echo "<option value=\"San Diego\">San Diego</option>"; 
       echo "<option value=\"San Francisco\">San Francisco</option>"; 
       echo "<option value=\"Tampa\">Tampa</option>"; 
       echo "</select>"; 

      echo "<br/>"; 

      // City2 
      echo "&nbsp;&nbsp;&nbsp;City 2: <select name=\"in_city2\" style=\"width: 245px\" >"; 
       echo "<option value=\"\">Select City...</option>"; 
       echo "<option value=\"Atlanta\">Atlanta</option>"; 
       echo "<option value=\"Atlantic City\">Atlantic City</option>"; 
       echo "<option value=\"Austin\">Austin</option>"; 
       echo "<option value=\"Baltimore\">Baltimore</option>"; 
       echo "<option value=\"Boston\">Boston</option>"; 
       echo "<option value=\"Charlotte\">Charlotte</option>"; 
       echo "<option value=\"Chicago\">Chicago</option>"; 
       echo "<option value=\"Cincinnati\">Cincinnati</option>"; 
       echo "<option value=\"Columbus\">Columbus</option>"; 
       echo "<option value=\"Dallas\">Dallas</option>"; 
       echo "<option value=\"Denver\">Denver</option>"; 
       echo "<option value=\"Detroit\">Detroit</option>"; 
       echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>"; 
       echo "<option value=\"Honolulu\">Honolulu</option>"; 
       echo "<option value=\"Houston\">Houston</option>"; 
       echo "<option value=\"Indianapolis\">Indianapolis</option>"; 
       echo "<option value=\"Irvine\">Irvine</option>"; 
       echo "<option value=\"Las Vegas\">Las Vegas</option>"; 
       echo "<option value=\"Los Angeles\">Los Angeles</option>"; 
       echo "<option value=\"Miami\">Miami</option>"; 
       echo "<option value=\"Minneapolis\">Minneapolis</option>"; 
       echo "<option value=\"Nashville\">Nashville</option>"; 
       echo "<option value=\"Newark\">Newark</option>"; 
       echo "<option value=\"New York\">New York</option>"; 
       echo "<option value=\"Oklahoma\">Oklahoma City</option>"; 
       echo "<option value=\"Orlando\">Orlando</option>"; 
       echo "<option value=\"Portland\">Portland</option>"; 
       echo "<option value=\"Philadelphia\">Philadelphia</option>"; 
       echo "<option value=\"Phoenix\">Phoenix</option>"; 
       echo "<option value=\"Raleigh\">Raleigh</option>"; 
       echo "<option value=\"Sacramento\">Sacramento</option>"; 
       echo "<option value=\"Salt Lake City\">Salt Lake City</option>"; 
       echo "<option value=\"San Antonio\">San Antonio</option>"; 
       echo "<option value=\"San Diego\">San Diego</option>"; 
       echo "<option value=\"San Francisco\">San Francisco</option>"; 
       echo "<option value=\"Tampa\">Tampa</option>"; 
       echo "</select>"; 

      echo "<br/>";   

      // City3 
      echo "&nbsp;&nbsp;&nbsp;City 3: <select name=\"in_city3\" style=\"width: 245px\" >"; 
       echo "<option value=\"\">Select City...</option>"; 
       echo "<option value=\"Atlanta\">Atlanta</option>"; 
       echo "<option value=\"Atlantic City\">Atlantic City</option>"; 
       echo "<option value=\"Austin\">Austin</option>"; 
       echo "<option value=\"Baltimore\">Baltimore</option>"; 
       echo "<option value=\"Boston\">Boston</option>"; 
       echo "<option value=\"Charlotte\">Charlotte</option>"; 
       echo "<option value=\"Chicago\">Chicago</option>"; 
       echo "<option value=\"Cincinnati\">Cincinnati</option>"; 
       echo "<option value=\"Columbus\">Columbus</option>"; 
       echo "<option value=\"Dallas\">Dallas</option>"; 
       echo "<option value=\"Denver\">Denver</option>"; 
       echo "<option value=\"Detroit\">Detroit</option>"; 
       echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>"; 
       echo "<option value=\"Honolulu\">Honolulu</option>"; 
       echo "<option value=\"Houston\">Houston</option>"; 
       echo "<option value=\"Indianapolis\">Indianapolis</option>"; 
       echo "<option value=\"Irvine\">Irvine</option>"; 
       echo "<option value=\"Las Vegas\">Las Vegas</option>"; 
       echo "<option value=\"Los Angeles\">Los Angeles</option>"; 
       echo "<option value=\"Miami\">Miami</option>"; 
       echo "<option value=\"Minneapolis\">Minneapolis</option>"; 
       echo "<option value=\"Nashville\">Nashville</option>"; 
       echo "<option value=\"Newark\">Newark</option>"; 
       echo "<option value=\"New York\">New York</option>"; 
       echo "<option value=\"Oklahoma\">Oklahoma City</option>"; 
       echo "<option value=\"Orlando\">Orlando</option>"; 
       echo "<option value=\"Portland\">Portland</option>"; 
       echo "<option value=\"Philadelphia\">Philadelphia</option>"; 
       echo "<option value=\"Phoenix\">Phoenix</option>"; 
       echo "<option value=\"Raleigh\">Raleigh</option>"; 
       echo "<option value=\"Sacramento\">Sacramento</option>"; 
       echo "<option value=\"Salt Lake City\">Salt Lake City</option>"; 
       echo "<option value=\"San Antonio\">San Antonio</option>"; 
       echo "<option value=\"San Diego\">San Diego</option>"; 
       echo "<option value=\"San Francisco\">San Francisco</option>"; 
       echo "<option value=\"Tampa\">Tampa</option>"; 
       echo "</select>"; 

      echo "<br/>"; 

      // State 
      echo "<font color=\"red\">*</font> State: <select name=\"in_state\" id=\"state\" style=\"width: 245px\" >"; 
       echo "<option>Select State...</option>"; 
       echo "<option value=\"Alabama\">Alabama</option>"; 
       echo "<option value=\"Alaska\">Alaska</option>"; 
       echo "<option value=\"Arizona\">Arizona</option>"; 
       echo "<option value=\"Arkansas\">Arkansas</option>"; 
       echo "<option value=\"California\">California</option>"; 
       echo "<option value=\"Colorado\">Colorado</option>"; 
       echo "<option value=\"Connecticut\">Connecticut</option>"; 
       echo "<option value=\"Delaware\">Delaware</option>"; 
       echo "<option value=\"Florida\">Florida</option>"; 
       echo "<option value=\"Georgia\">Georgia</option>"; 
       echo "<option value=\"Hawaii\">Hawaii</option>"; 
       echo "<option value=\"Idaho\">Idaho</option>"; 
       echo "<option value=\"Illinois\">Illinois</option>"; 
       echo "<option value=\"Indiana\">Indiana</option>"; 
       echo "<option value=\"Iowa\">Iowa</option>"; 
       echo "<option value=\"Kansas\">Kansas</option>"; 
       echo "<option value=\"Kentucky\">Kentucky</option>"; 
       echo "<option value=\"Louisiana\">Louisiana</option>"; 
       echo "<option value=\"Maine\">Maine</option>"; 
       echo "<option value=\"Maryland\">Maryland</option>"; 
       echo "<option value=\"Massachusetts\">Massachusetts</option>"; 
       echo "<option value=\"Michigan\">Michigan</option>"; 
       echo "<option value=\"Minnesota\">Minnesota</option>"; 
       echo "<option value=\"Mississippi\">Mississippi</option>"; 
       echo "<option value=\"Missouri\">Missouri</option>"; 
       echo "<option value=\"Montana\">Montana</option>"; 
       echo "<option value=\"Nebraska\">Nebraska</option>"; 
       echo "<option value=\"Nevada\">Nevada</option>"; 
       echo "<option value=\"New Hampshire\">New Hampshire</option>"; 
       echo "<option value=\"New Jersey\">New Jersey</option>"; 
       echo "<option value=\"New Mexico\">New Mexico</option>"; 
       echo "<option value=\"New York\">New York</option>"; 
       echo "<option value=\"North Carolina\">North Carolina</option>"; 
       echo "<option value=\"North Dakota\">North Dakota</option>"; 
       echo "<option value=\"Ohio\">Ohio</option>"; 
       echo "<option value=\"Oklahoma\">Oklahoma</option>"; 
       echo "<option value=\"Oregon\">Oregon</option>"; 
       echo "<option value=\"Pennsylvania\">Pennsylvania</option>"; 
       echo "<option value=\"Rhode Island\">Rhode Island</option>"; 
       echo "<option value=\"South Carolina\">South Carolina</option>"; 
       echo "<option value=\"South Dakota\">South Dakota</option>"; 
       echo "<option value=\"Tennessee\">Tennessee</option>"; 
       echo "<option value=\"Texas\">Texas</option>"; 
       echo "<option value=\"Utah\">Utah</option>"; 
       echo "<option value=\"Vermont\">Vermont</option>"; 
       echo "<option value=\"Virginia\">Virginia</option>"; 
       echo "<option value=\"Washington\">Washington</option>"; 
       echo "<option value=\"West Virginia\">West Virginia</option>"; 
       echo "<option value=\"Wisconsin\">Wisconsin</option>"; 
       echo "<option value=\"Wyoming\">Wyoming</option>"; 
       echo "</select>"; 

      echo "<br/><br/>"; 

      //Additional Info 
      echo "&nbsp;&nbsp;Additional Info: "; 
      echo "<br/>";   
      echo "<textarea rows=\"5\" cols=\"26\" name=\"in_info\" >$new_info"; 
      echo "</textarea>"; 
      echo "<font size=\"1\">&nbsp;&nbsp;(Maximum characters: 500)</font>"; 
      echo "<br/>"; 

      //Submit Button 
      echo "<input type=\"hidden\" name=\"submission\" value=\"1\">"; 
      echo "<center><input type=\"submit\" value=\"LIST ME\" class=\"button2\" /></center>";   

    echo "</form>"; 
    echo "</div>"; 
    echo "</div>"; 
} 
?>

一旦確認它被髮送到再輸入到我的數據庫。感謝所有幫助一個PHP的MySQL文件。

〜Nikoli

來源

2012-08-17 user1330648

如果這是一個JavaScript問題發佈產生的HTML，而不是PHP ...另外，我認爲你會更好地從驗證邏輯中分離出你的DOM邏輯，似乎有很多重複和複製/粘貼。看看這個答案http://stackoverflow.com/questions/9674148/jquery-form-validation-how-to-iterate/9674338#9674338 – elclanrs 2012-08-17 04:46:42

你的代碼沒有做你認爲的事情。

var name = document.getElementById('name');

回報：

<input type="text" name="in_name" maxlength="60" size="26" id="name" value='$new_name' >

相反，得到的價值，你想做的事：

var name = document.getElementById('name').value;

這應該解決當前的問題。

在另一個說明中，您應該考慮關閉該php標記，而不是將所有內容都包含在echo語句中。在你的風格中使用CSS將爲你節省很多頭痛。

來源

2012-08-17 05:07:21 Phil

Javascript：表單驗證getElementById只返回第一個id元素

回答

相關問題