How would I validate multiple input boxes with javascript?

Question

I am attempting to have a web form that disappears onclick="" , but only after both the requirement fields have been met, and the default value for the selection list has been switched out of.

I have already gotten the default value to switch, and the web form to disappear, however when I submit the web form after adding more than one input validation, the form does not disappear. This leads me to believe that the problem is simply logical. I have already attempted to use getElementByClass , querySelectorAll , and getElementById and had no luck. At this point in the snippet, the form can only be submitted when a location is chosen. I have previously gotten it to also require one input, but I want more than one. Any thoughts?

 <form name="survey" id="survey" action="" method="post"> <fieldset id="infoContact"> Name <input type="text" name="name" id="name" required="required" /> <div id="thank" style="display: none"> <p> Thank you, your message has been sent. </p> </div> Email <input id="email" type="email" name="email" required="required" /> Phone <br /> <input type="text" name="phone" id="phone1" class="phone" maxlength="4" minlength="3" /> <input type="text" name="phone" id="phone2" class="phone" maxlength="4" minlength="3" /> <input type="text" name="phone" id="phone3" class="phone" maxlength="4" minlength="3" /> <label for="inquiry">Type of Inquiry</label> <select id="inquiry" name="inquiry"> <option value="complain">Complaint</option> <option value="complimp">Compliment</option> <option value="employ">Employment</option> <option value="fran">Franchising</option> <option value="market">Marketing</option> <option value="nutrit">Nutritional Information/Ingredients</option> <option value="rewards">Robeks Rewards</option> </select> <label for="location">Robeks Location</label> <select name="location" required="required" onchange="changeValue()"> <option value="default">- Select A Location -</option> <optgroup label="OH"> <option value="1">Akron (Montrose) I 3757 West Market Street</option> <option value="2">(Wallhaven) I 1650 West Market Street</option> <option value="3">Canton, OH I 4466 Belden Village St NW</option> <option value="4">North Olmsted, OH I 23420 Lorain Road #500</option> <option value="5">Stow, OH I 4222 Kent Road</option> <option value="6">Strongsville, OH I 18025 Royalton Road</option> <option value="7">Warrensville Heights I 4025 Richmond Road</option> <option value="8">Westlake, OH I 30319 Detroit Rd.</option> </optgroup> <optgroup label="VA"> <option value="9">Alexandria, VA I 5824 Kingstowne Center Drive</option> <option value="10">Arlington, VA I 4115 Campbell Avenue</option> <option value="11">Broadlands Ctr. Plaza I 43145 Broadlands Center Plaza</option> <option value="12">Dulles I 22035 Dulles Retail Plaza</option> <option value="13">Falls Church, VA I 1063 West Broad Street</option> <option value="14">Herndon, VA I 1142 Elden Street</option> <option value="15">McLean, VA I 6661-A Old Dominion Dr.</option> <option value="16">Reston, VA I 1835 Fountain Drive</option> <option value="17">Sterling, VA I 21012 Southbank st</option> <option value="18">Vienna, VA I 8359 Leesburg Pike</option> </optgroup> <optgroup label="MD"> <option value="19">Annapolis Harbor Center I 2466 Solomons Island Road</option> </optgroup> <optgroup label="PA"> <option value="20">Ardmore I 32 Parking Plaza, #099</option> <option value="21">Phiadebhia I 1035 Chestnut St.</option> <option value="22">Philadelphia - Mobile Food Truck I 2551 Orthodox Street</option> </optgroup> <optgroup label="WA"> <option value="23">Bellingham, WA I 3110 Woburn St. Ste 107</option> </optgroup> <optgroup label="CA"> <option value="24">Burbank, CA I 1001 N. San Fernando Rd</option> <option value="25">Burbank, CA I 2575 N. Hollywood Way</option> <option value="26">Camarillo, CA I 612 Las Posas Rd.</option> <option value="27">Canoga Park, CA I 6600 Topanga CYn. Blvd. #1008A</option> <option value="28">Central Plaza, CA I 3448 Wilshire Blvd.</option> <option value="29">Cerritos, CA I 141a Los Cerritos MaII</option> <option value="30">Chatsworth, CA I 20509 Devonshire</option> <option value="31">Chula Vista, CA I 374 E. H Street, #1709 <option value="32">Costa Mesa - Mesa Verde Plaza I 2701 Harbor Blvd. Suite D2</option> <option value="33">Costa Verde 8750 Genesee Ave# 254</option> <option value="34">CSLB (SRWC) I 1401 Palo Verde Ave., A</option> <option value="35">CSULB I 1212 N. Bellflower Blvd.</option> <option value="36">Culver City, CA I 3891 Overland Ave.</option> <option value="37">Fullerton, CA I 110 Imperial Highway</option> <option value="38">GIendora, CA I 1365 E. Gladstone St. #400</option> <option value="39">Granada Hills, CA I 16958 San Fernando Mission</option> <option value="40">Harrah's Casino I 777 Harrah's Rincon Way</option> <option value="41">Kearny Mesa I 5285 Overland Ave#103</option> <option value="42">Livermore, CA I 2300 1st St Suite 116</option> <option value="43">Manhattan Beach, CA I 5348 West Rosecrans</option> <option value="44">Mira Mesa, CA I 8250 Mira Mesa Blvd., Ste C</option> <option value="45">Mission Valley I 1025 Camino De La Reina #4</option> <option value="46">Monrovia, CA I 941 W. Huntington Dr.</option> <option value="47">Montalvo Square I 1780 S. Victoria Ave Suite 8</option> <option value="48">Pacific Pal-odes, CA I 15280 Antioch Street</option> <option value="49">Rancho Bernardo, CA I 16588 Bernardo Center Drive #120</option> <option value="49">Rancho Cucamonga I 8160 Haven Ave. #100</option> <option value="50">San Marcos, CA I 133 N. Twin Oaks Valley Rd #108</option> <option value="51">Sherman Oaks Galleria I 15301 Ventura Blvd., Suite P-15</option> <option value="52">Stockton CA 222. N. El Dorado St.</option> <option value="53">Toluca Lake I 4314 Riverside Drive</option> <option value="54">Torrance Towne Ctr. I 25346 Crenshaw bl #c</option> <option value="55">Traffic Circle I 4547 E. Pacific Coast Highway</option> <option value="56">Westchester, CA I 8905 S. Sepulveda blvd.</option> <option value="57">Westridge Village I 26810 The Old Road</option> </optgroup> <optgroup label="CT"> <option value="58">Danbury I 109 Federal Road</option> <option value="59">Fairfield, CT I 2061 Black Rock Tpk</option> <option value="60">High Ridge I 1125 High Ridge Road</option> <option value="61">Norwalk, CT I 404 Westport</option> <option value="62">Ridgeway Plaza I 2397 Summer St</option> <option value="63">West Hartford, CT I 967 Farmington Ave</option> </optgroup> <optgroup label="FL"> <option value="64">Doral, FL I 5335 NW 87th Ave Unit C-105</option> <option value="65">Hialeah, FL I 3695 W 18 AVE</option> <option value="66">Homestead, FL I 2834 NE 8TH Street</option> <option value="67">Miami, FL I 12510 SW 120 ST</option> <option value="68">Neptune Beach I 628-3 Atlantic Blvd</option> <option value="69">Tallahassee I 3122 Mahan Drive #302</option> </optgroup> <optgroup label="AZ"> <option value="70">Goodyear, AZ I 15525 W. Roosevelt St.</option> <option value="71">Prescott Valley, AZ I 3140 N Glassford Hill Rd Ste 102</option> <option value="72">Prescott, AZ I 3180 Willow Creek Rd Ste A-2</option> <option value="73">Tucson, AZ I 50 S Houghton Rd, Suite 160</option> </optgroup> <optgroup label="IL"> <option value="74">Naperville, IL I 2936 Show Place Dr. Suite 116</option> </optgroup> <optgroup label="KS"> <option value="75">Overland Park, KS I 8154 W. 135th Street</option> </optgroup> <optgroup label="GA"> <option value="76">Perimeter Place, GA I 123 Perimeter Center West, Suite 300</option> </optgroup> <optgroup label="NY"> <option value="77">Plainview I 331 S. Oyster Bay Road</option> </optgroup> <optgroup label="DC"> <option value="78">Washington DC I 1707 L ST NW 540}.</option> <option value="79">Washington, DC I 4523 Wisconsin Ave NW</option> </optgroup> </select> Comments <textarea name="comments"> </textarea> <input id="submit" type="submit" value="Contact Us!" onclick="Enter()" disabled="disabled" /> </fieldset> </form> <script> function Enter() { if ((document.getElementById("name").value !== "") && (document.getElementById("email").value !== "")) ) survey.style.display = "none"; if (survey.style.display === "none") { thank.style.display = "inline"; } } </script> <script> var defauld = document.getElementById("default"); function changeValue() { if (document.getElementById("survey").value !== defauld) { document.getElementById("submit").disabled = false; } } </script> 

At the time of this edit, I am currently trying to have both the name and email input boxes be validated before the form can disappear. The form does not however disappear when the form is submitted, but clears and reloads.

Answer 1

you need to put your thank you div outside the form.

 <div id="thank" style="display: none"> <p> Thank you, your message has been sent. </p> </div> <form name="survey" id="survey" action="" method="post"> <fieldset id="infoContact"> Name <input type="text" name="name" id="name" required="required" /> Email <input id="email" type="email" name="email" required="required" /> Phone <br /> <input type="text" name="phone" id="phone1" class="phone" maxlength="4" minlength="3" /> <input type="text" name="phone" id="phone2" class="phone" maxlength="4" minlength="3" /> <input type="text" name="phone" id="phone3" class="phone" maxlength="4" minlength="3" /> <label for="inquiry">Type of Inquiry</label> <select id="inquiry" name="inquiry"> <option value="complain">Complaint</option> <option value="complimp">Compliment</option> <option value="employ">Employment</option> <option value="fran">Franchising</option> <option value="market">Marketing</option> <option value="nutrit">Nutritional Information/Ingredients</option> <option value="rewards">Robeks Rewards</option> </select> <label for="location">Robeks Location</label> <select name="location" required="required" onchange="changeValue()"> <option value="default">- Select A Location -</option> <optgroup label="OH"> <option value="1">Akron (Montrose) I 3757 West Market Street</option> <option value="2">(Wallhaven) I 1650 West Market Street</option> <option value="3">Canton, OH I 4466 Belden Village St NW</option> <option value="4">North Olmsted, OH I 23420 Lorain Road #500</option> <option value="5">Stow, OH I 4222 Kent Road</option> <option value="6">Strongsville, OH I 18025 Royalton Road</option> <option value="7">Warrensville Heights I 4025 Richmond Road</option> <option value="8">Westlake, OH I 30319 Detroit Rd.</option> </optgroup> <optgroup label="VA"> <option value="9">Alexandria, VA I 5824 Kingstowne Center Drive</option> <option value="10">Arlington, VA I 4115 Campbell Avenue</option> <option value="11">Broadlands Ctr. Plaza I 43145 Broadlands Center Plaza</option> <option value="12">Dulles I 22035 Dulles Retail Plaza</option> <option value="13">Falls Church, VA I 1063 West Broad Street</option> <option value="14">Herndon, VA I 1142 Elden Street</option> <option value="15">McLean, VA I 6661-A Old Dominion Dr.</option> <option value="16">Reston, VA I 1835 Fountain Drive</option> <option value="17">Sterling, VA I 21012 Southbank st</option> <option value="18">Vienna, VA I 8359 Leesburg Pike</option> </optgroup> <optgroup label="MD"> <option value="19">Annapolis Harbor Center I 2466 Solomons Island Road</option> </optgroup> <optgroup label="PA"> <option value="20">Ardmore I 32 Parking Plaza, #099</option> <option value="21">Phiadebhia I 1035 Chestnut St.</option> <option value="22">Philadelphia - Mobile Food Truck I 2551 Orthodox Street</option> </optgroup> <optgroup label="WA"> <option value="23">Bellingham, WA I 3110 Woburn St. Ste 107</option> </optgroup> <optgroup label="CA"> <option value="24">Burbank, CA I 1001 N. San Fernando Rd</option> <option value="25">Burbank, CA I 2575 N. Hollywood Way</option> <option value="26">Camarillo, CA I 612 Las Posas Rd.</option> <option value="27">Canoga Park, CA I 6600 Topanga CYn. Blvd. #1008A</option> <option value="28">Central Plaza, CA I 3448 Wilshire Blvd.</option> <option value="29">Cerritos, CA I 141a Los Cerritos MaII</option> <option value="30">Chatsworth, CA I 20509 Devonshire</option> <option value="31">Chula Vista, CA I 374 E. H Street, #1709 <option value="32">Costa Mesa - Mesa Verde Plaza I 2701 Harbor Blvd. Suite D2</option> <option value="33">Costa Verde 8750 Genesee Ave# 254</option> <option value="34">CSLB (SRWC) I 1401 Palo Verde Ave., A</option> <option value="35">CSULB I 1212 N. Bellflower Blvd.</option> <option value="36">Culver City, CA I 3891 Overland Ave.</option> <option value="37">Fullerton, CA I 110 Imperial Highway</option> <option value="38">GIendora, CA I 1365 E. Gladstone St. #400</option> <option value="39">Granada Hills, CA I 16958 San Fernando Mission</option> <option value="40">Harrah's Casino I 777 Harrah's Rincon Way</option> <option value="41">Kearny Mesa I 5285 Overland Ave#103</option> <option value="42">Livermore, CA I 2300 1st St Suite 116</option> <option value="43">Manhattan Beach, CA I 5348 West Rosecrans</option> <option value="44">Mira Mesa, CA I 8250 Mira Mesa Blvd., Ste C</option> <option value="45">Mission Valley I 1025 Camino De La Reina #4</option> <option value="46">Monrovia, CA I 941 W. Huntington Dr.</option> <option value="47">Montalvo Square I 1780 S. Victoria Ave Suite 8</option> <option value="48">Pacific Pal-odes, CA I 15280 Antioch Street</option> <option value="49">Rancho Bernardo, CA I 16588 Bernardo Center Drive #120</option> <option value="49">Rancho Cucamonga I 8160 Haven Ave. #100</option> <option value="50">San Marcos, CA I 133 N. Twin Oaks Valley Rd #108</option> <option value="51">Sherman Oaks Galleria I 15301 Ventura Blvd., Suite P-15</option> <option value="52">Stockton CA 222. N. El Dorado St.</option> <option value="53">Toluca Lake I 4314 Riverside Drive</option> <option value="54">Torrance Towne Ctr. I 25346 Crenshaw bl #c</option> <option value="55">Traffic Circle I 4547 E. Pacific Coast Highway</option> <option value="56">Westchester, CA I 8905 S. Sepulveda blvd.</option> <option value="57">Westridge Village I 26810 The Old Road</option> </optgroup> <optgroup label="CT"> <option value="58">Danbury I 109 Federal Road</option> <option value="59">Fairfield, CT I 2061 Black Rock Tpk</option> <option value="60">High Ridge I 1125 High Ridge Road</option> <option value="61">Norwalk, CT I 404 Westport</option> <option value="62">Ridgeway Plaza I 2397 Summer St</option> <option value="63">West Hartford, CT I 967 Farmington Ave</option> </optgroup> <optgroup label="FL"> <option value="64">Doral, FL I 5335 NW 87th Ave Unit C-105</option> <option value="65">Hialeah, FL I 3695 W 18 AVE</option> <option value="66">Homestead, FL I 2834 NE 8TH Street</option> <option value="67">Miami, FL I 12510 SW 120 ST</option> <option value="68">Neptune Beach I 628-3 Atlantic Blvd</option> <option value="69">Tallahassee I 3122 Mahan Drive #302</option> </optgroup> <optgroup label="AZ"> <option value="70">Goodyear, AZ I 15525 W. Roosevelt St.</option> <option value="71">Prescott Valley, AZ I 3140 N Glassford Hill Rd Ste 102</option> <option value="72">Prescott, AZ I 3180 Willow Creek Rd Ste A-2</option> <option value="73">Tucson, AZ I 50 S Houghton Rd, Suite 160</option> </optgroup> <optgroup label="IL"> <option value="74">Naperville, IL I 2936 Show Place Dr. Suite 116</option> </optgroup> <optgroup label="KS"> <option value="75">Overland Park, KS I 8154 W. 135th Street</option> </optgroup> <optgroup label="GA"> <option value="76">Perimeter Place, GA I 123 Perimeter Center West, Suite 300</option> </optgroup> <optgroup label="NY"> <option value="77">Plainview I 331 S. Oyster Bay Road</option> </optgroup> <optgroup label="DC"> <option value="78">Washington DC I 1707 L ST NW 540}.</option> <option value="79">Washington, DC I 4523 Wisconsin Ave NW</option> </optgroup> </select> Comments <textarea name="comments"> </textarea> <input id="submit" type="submit" value="Contact Us!" onclick="Enter()" disabled="disabled" /> </fieldset> </form> <script> function Enter() { if (document.getElementById("name").value !== "" && document.getElementById("email").value !== "") survey.style.display = "none"; if (survey.style.display === "none") { thank.style.display = "inline"; } } </script> <script> var defauld = document.getElementById("default"); function changeValue() { if (document.getElementById("survey").value !== defauld) { document.getElementById("submit").disabled = false; } } </script> 

Answer 2

@Dij suggested adding the same line of code for the first input validation. The following code solved my problem.

                <script>                           
                    function Enter() { //the form disappears only once the input boxes have been filled
                        if(document.getElementById("name").value !== "" &&(document.getElementById("email").value !== ""))
                        survey.style.display = "none";

                        if (survey.style.display==="none"){//once the form dissapears the thank div appears
                            thank.style.display = "inline";
                        }
                    }
                </script>

Answer 3

you must use event onchange when data on input change

  var select= document.getElementsByTagName('select'); for(var i = 0, i < select.length, i++) { select[i].addEventListener("change", function(event) { // validate }); }