使用Javascript验证单选按钮

Validating radio buttons with Javascript

本文关键字：单选按钮 验证 Javascript 使用      更新时间：2023-09-26

我正在创建一个支付请求表单，用户将在其中选择加班费的支付方式。这两种选择是"工资"（用户在工资单中获得额外工资）或"时间"（用户获得补偿休假，以便日后休假）。

我创建了一个单选按钮输入，供用户选择其中一个。我写了一个验证，以确保选择了一个按钮，并且它在我的测试程序中运行良好，但当我将其纳入该项目的代码中时，代码不会运行。据我所见，我的测试程序和项目之间没有任何区别。

我试图使用一个更简单的布尔值，并希望坚持使用这个选项，而不是for循环或使用JQuery（如果可能的话）。

这是html:的相关部分

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div style="display:block">
                <input class="radio" type="radio" id="timePay" name="timePay" value="0" ><span>time</span>
                <input class="radio" type="radio" id="timePay" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>

以下是javascript的相关部分：

function submitCard (form) {
    errorString = "";
    if((form.timePay[0].checked == false) && (form.timePay[1].checked == false)) {
        alert("please choose either time or pay");
        timePay[0].focus();
        return false;
    }
    if(errorString = "") {
        form.submit()
    }
}

编辑以添加以下内容：

Cyril DD的回答为我指明了正确的方向。我更改了单选按钮的ID，使其对每个按钮都是唯一的。HTML现在显示为：

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div>
                <input class="radio" type="radio" id="selectTime" name="timePay" value="0"><span>time</span>
                <input class="radio" type="radio" id="selectPay" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>

然后，我将每个按钮定义为一个单独的变量，而不是像以前那样统称为"timePay"，并更改了如下javascript：

if((selectTime.checked == false) && (selectPay.checked == false)) {
    alert("please choose either time or pay");
    selectTime.focus();
    return false;
}

HTML中的第一个：您应该使用相同的"name"属性，但使用不同的ID（演示）

有些浏览器可能与您尝试的操作不兼容。与其在function submitCard (form)中使用"表单"参数，您只需要有一个函数function submitCard()，然后使用它们的ID 在网页中找到您想要的元素

function submitCard () {
    checkbox1 = document.getElementById("timeCheckBox").checked
    checkbox2 = document.getElementById("payCheckBox").checked
    if(!checkbox1 && !checkbox2)
        alert("nothing checked !");
        return false;
    }
    else{
        return true
    }
}

HTML看起来像

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">
<div>
    <label>
        <span>request</span>
            <div style="display:block">
                <input class="radio" type="radio" id="timeCheckBox" name="timePay" value="0" ><span>time</span>
                <input class="radio" type="radio" id="payCheckBox" name="timePay" value="1"><span>pay</span>
            </div>
     </label>
</div>
<input type="submit" id="submit" value="submit">
</form>

您没有将表单的引用传递给submitCard()函数。

更改

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">

至

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post">

其他注意事项：

  1. 您不应在表单上多次使用id timePay
  2. 您不应该将div标记放在span标记内

此处的工作示例

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post">

必须将参数传递给函数。这就是JS验证失败的原因。

相关文章：