Javascript: Formular-Validierung getElementById nur zurückgeben erstes id element

Meine form der Validierung Skript scheint zu laufen, aber die getElementById ist nur das Lesen der ersten Id und überspringen Sie den rest aus irgendeinem Grund. Ist es aufgrund von geschlossenen Tags Probleme? Wenn ja, wo setze ich Sie? oder ist es ein weiterer Grund, die ich bin mit Blick irgendwie. Bitte helfen 🙁

Ich bin dankbar für jede Hilfe, ich habe gestarrt, an diesem Tage. Hier ist der code.

Den JS code.

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

Hier ist der form-code.

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

Einmal validiert, wird es an eine php-mysql-Datei die Einträge in meine Datenbank. Nochmals vielen Dank für jede Hilfe.

~Nikoli

Wenn dies ist eine JavaScript-Frage poste den resultierenden HTML-Code, nicht PHP... und ich glaube, Sie wäre eine bessere Trennung von Ihrem DOM Logik von Ihrem Validierungs-Logik, es scheint eine Menge von Wiederholung und kopieren/einfügen. Werfen Sie einen Blick auf diese Antwort stackoverflow.com/questions/9674148/...

InformationsquelleAutor TheMonkeyMan | 2012-08-17

Schreibe einen Kommentar