使用if-else-if-true检查(验证）单选按钮如果未检查则无警报必须检查警报

Check(validate) radio buttons with an if else if true no alert if not checked alert must be check

本文关键字：检查 如果 if-else-if-true 验证 单选按钮 使用      更新时间：2023-09-26

这就是我在HTML方面所做的。我有一个id为products的表单，名称为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;
                }
         });}

演示：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;
    }
});
相关文章：