Javascript：表单验证getElementById只返回第一个id元素

Question

我的表单验证脚本似乎正在运行，但是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

Answer 1

您的代码没有按照您的想法执行。

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用于你的风格也将为你节省很多麻烦。