如何使用JavaScript验证多个输入框？

Question

我正在尝试创建一个Web表单，该表单在onclick=""消失，但是仅在两个要求字段都已满足并且选择列表的默认值已被切换出之后。

我已经有了要切换的默认值，并且Web表单消失了，但是，当我添加多个输入验证后提交Web表单时，该表单不会消失。 这使我相信问题完全是逻辑上的。 我已经尝试使用getElementByClass ， querySelectorAll和getElementById ，但没有运气。 此时，在摘录中，只有在选择位置后才能提交表单。 我以前得到它也需要一个输入，但是我想要多个。 有什么想法吗？

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

在进行此编辑时，我目前正在尝试在表单消失之前验证名称和电子邮件输入框。 但是，提交表单时，表单不会消失，而是会清除并重新加载。

Answer 1

您需要将您的div谢谢您的div。

 <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建议为第一次输入验证添加相同的代码行。 以下代码解决了我的问题。

                <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

输入数据更改时，必须使用事件onchange

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