Question

我正在尝试制作一个验证所有条目的订单，以确保文本框中包含数据，并且选择了3个单选按钮中的一个。正如您在我的代码中看到的，我使用了一个函数来验证所需的所有文本框，但我无法通过单选按钮进行验证。我试过if else语句和循环，但没有一个对我有效。我已经尝试在当前函数中包含单选按钮验证，并且还尝试为它创建一个新函数。请帮忙！

HTML here：

<form action="FormProcessor.html.html" method="get" onsubmit="return check();">

  <select>
    <option>Hand Tool</option>
    <option>Saw</option>
    <option>Hammer</option>
    <option>Screwdriver</option>
    <option>Wrench</option>
    <option>Pliers</option>
  </select>

  <select>
    <option>Power Tools</option>
    <option>Circular Saw</option>
    <option>Sabre Saw</option>
    <option>Drill</option>
    <option>Belt Sander</option>
    <option>Table Saw</option>
  </select>

    <label>
    <select>
        <option>Materials</option>
        <option>Plywood</option>
        <option>Shingles</option>
        <option>Nails</option>
        <option>Screws</option>
    </select>
 </label>








<label>First Name 
<input type="text" id="firstname" name="firstname" placeholder="First Name"></label>

<label>Last Name
<input type="text" id="lastname" name="lastname" placeholder="Last Name"></label> <br><br>

<label>Street Address 1
<input type="text" id="street_address_1" name="street_address_1" placeholder="Address 1"></label> <br><br>

<label>Street Address 2
<input type="text" id="street_address_2" name="street_address_2" placeholder="Address 2"></label> <br><br>

<label>City
<input type="text" id="city" name="city" placeholder="City"></label>

<label>State
<input type="text" id="state" name="State" placeholder="State"></label>

<label>Zip
<input type="text" id="zip_code" name="zip_code" placeholder="Zip"></label> <br><br>

<label>Phone
<input type="text" id="phone" name="phone" placeholder="Phone"></label>

<label>Fax
<input type="text" id="fax" name="fax" placeholder="Fax"></label> <br><br>

<label>Payment Method?
<input type="radio" name="card_type" id="visa">
<label for="visa">Visa</label>
<input type="radio" name="card_type" id="mastercard">
<label for="mastercard">MasterCard</label>
<input type="radio" name="card_type" id="americanexpress"> 
<label for="americanexpress">American Express</label><br><br>

<label>Credit Card Number
<input type="text" id="credit_card_number" name="credit_card_number" placeholder="Credit Card Number"></label> <br><br>


<label>Experiation Month
  <select id = month>
    <option>Month</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
</label>



<label>Experiation Year
  <select id = year>
    <option>Year</option>
    <option>2010</option>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
  </select> <br>
</label> <br><br>

<input type="submit" value="Submit Order">

JS在这里

    function check() {

        var errormessage = "";

        if (document.getElementById('firstname').value == "") {
            errormessage += 'Please enter a First Name \n';
            }
        if (document.getElementById('lastname').value == "") {
            errormessage += 'Please enter a Last Name \n';
            }
        if (document.getElementById('street_address_1').value == "") {
            errormessage += 'Please enter your Street Address \n';
            }
      if (document.getElementById('city').value == "") {
            errormessage += 'Please enter a City \n';
            }
        if (document.getElementById('state').value == "") {
            errormessage += 'Please enter a State \n';
            }
        if (document.getElementById('zip_code').value == "") {
            errormessage += 'Please enter a Zip Code \n';
            }
        if (document.getElementById('phone').value == "") {
            errormessage +='Please enter a Phone Number \n';
            }
        if (document.getElementById('credit_card_number').value == "") {
            errormessage += 'Please enter a Credit Card \n';
            }
        if (document.getElementById('month').value == "") {
            errormessage += 'Please enter a Month \n';
            }
        if (document.getElementById('year').value == "") {
            errormessage += 'Please enter a Year \n';
            }
        if (errormessage != "") {
            alert(errormessage);
            return false;
            }

        }

Answer 1

如何设置验证单选按钮的功能，如下所示：

function validateRadio(radioGroup) {
    for (i = 0; i < radioGroup.length; ++ i) {
        if (radioGroup[i].checked) return true;
    }
    return false;
}

然后在check()函数中，您可以调用validateRadio()函数并将其传递给您要检查的广播组：

if(!validateRadio(document.forms["formid"]["card_type"])) {
    errormessage +='Please select a Payment Method\n';
}

使用JavaScript验证带有文本框和单选按钮的表单

1 个答案: