Проверьте (подтвердите) радиокнопки с if else, если true, нет предупреждения, если не отмечено. Предупреждение должно быть проверено.

Question

Это то, что у меня есть на стороне HTML. У меня есть форма с идентификатором продуктов, имя myForm, тег действия метод get, и onsubmit возвращает функцию validateForm(); У меня есть полная форма развернутую заказа

<form id="products"name="myForm"action="FormProcessor.html"method="get" 
onsubmit="return validateForm();"> 

    <label for="payment">Payment Method?</label> 
    <input id="visa" name="credit_card" type="radio" value="Visa" /> 
    <label for="visa">Visa</label> 
    <input id="masterCard" name="credit_card" type="radio"value="MasterCard" /> 
    <label for="mastercard">MasterCard</label> 
    <input id="ae"name="credit_card"type="radio"value="American Express" /> 
    <label for="americanexpress">American Express</label><br> 

Это то, что я имею на Js стороне вещей, я также пытаюсь записать его в ванили JS. Я еще не изучил jQuery, но я все еще новичок в программировании. Я не уверен, почему он не предупреждает.

function validateForm() { 
     var p_form = document.getElementById("products"); 
     p_form.addEventListener("submit", function(event) { 
     var payment_array = document.getElementsByName("credit_card"); 

      for(var i = 0; i < payment_array.length; i++) { 
       if(payment_array[i].checked) { 
       selection_made = true; 
       break; 
       } 
      } 

       if(!selection_made) { 
        event.preventDefault(); 
        alert("Payment Method must be selected."); 
        return false; 
       } 
     });} 

Answer 1

Демо: http://jsfiddle.net/e4gfs67o/1/

Решение:

HTML:

<form id="products" name="myForm" action="FormProcessor.html" method="get"> 
    <label for="payment">Payment Method?</label> 
    <input id="visa" name="credit_card" type="radio" value="Visa" /> 
    <label for="visa">Visa</label> 
    <input id="masterCard" name="credit_card" type="radio" value="MasterCard" /> 
    <label for="mastercard">MasterCard</label> 
    <input id="ae"name="credit_card" type="radio" value="American Express" /> 
    <label for="americanexpress">American Express</label><br> 
    <button type='submit'>Submit</button> 
</form> 

Javascript:

var form = document.getElementById('products'); 

form.addEventListener('submit', function(event) { 
    var radios = document.getElementsByName('credit_card'), 
     len = radios.length, 
     i = 0, 
     selected = false; 

    for (; i < len; i++) { 
     if (radios[i].checked) { 
      selected = true; 
      break; 
     } 
    } 

    if (selected) { 
     return true; 
    } else { 
     event.preventDefault(); 
     alert('Payment Method must be selected.'); 
     return false; 
    } 
});