JavaScriptを使用してテキストボックスとラジオボタンでフォームを検証する

Question

すべての入力を検証してテキストボックスにデータがあることを確認し、3つのラジオボタンの1つが選択されているオーダーフォームを作成しようとしています。私のコードでわかるように、必要なすべてのテキストボックスを検証する関数を使用しましたが、ラジオボタンを検証することはできません。私は他のステートメントとループがあれば試しましたが、誰も私のために働いていません。私は現在の関数でラジオボタンの検証を含めてみましたが、新しい関数を作成しようとしました。助けてください！ここ

HTML：

<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'; 
}