需要帮助使用 JavaScript 验证单选按钮答案

【问题标题】：Need help validating radio buttons with JavaScript需要帮助使用 JavaScript 验证单选按钮
【发布时间】：2013-10-09 14:29:24
【问题描述】：

我需要帮助使用 JavaScript 验证单选按钮。这是 HTML 部分：

<span class="formbold">Will you be attending the ceremony and reception?</span><br/>
<input type="radio" name="receptionattend" value="yesboth" /> Yes, both!<br/>
<input type="radio" name="receptionattend" value="yesc" /> Yes, but only the ceremony! <br/>
<input type="radio" name="receptionattend" value="yesr" /> Yes, but only the reception!<br/>
<input type="radio" name="receptionattend" value="no" /> No, you guys are lame!

这是我拥有的最简单的验证代码：

function validateForm()
    var y=document.forms["rsvpform"]["receptionattend"].checked;
 if (y==null || y=="")
    {
    alert("Please indicate whether or not you will attend.");
    return false;
    }
}

我的问题似乎主要是，无论我如何编码验证，即使我选择了单选按钮，它也会返回错误消息。

【问题讨论】：

y 总是有一个值，true 或false，你应该检查false :: if (!y) {}
现在它甚至没有给我我的错误信息。我之前的问题是，即使我选择了一个选项，我也收到了消息。 :S
糟糕！抱歉，我在不知不觉中更改了其他内容。始终出现错误消息。

标签： javascript validation radio-button

【解决方案1】：

这一行：

var y=document.forms["rsvpform"]["receptionattend"].checked;

根据您元素的选中属性返回true 或false，因此您应该这样做：

if ( !y ) { //if not checked i.e false
    alert("Please indicate whether or not you will attend.");
    return false;
}

喜欢：

function validateForm() {
    var is_checked = false;
    var eles = document.forms["rsvpform"]["receptionattend"];
    for(var i = 0; i < eles.length; i++ ) {
        if( eles[i].checked ) {
            is_checked = true;
            break;
        }
    }

    if (!is_checked)
    {
        alert("Please indicate whether or not you will attend.");
        return false;
    }
    else {
        alert("valid");
     }
}

演示:: jsFiddle

【讨论】：

好的，我还是有问题。即使我选择了一个选项，它也会返回错误消息。
@AshleyMarieRoberts 用演示检查添加的答案
感谢您的帮助！

【解决方案2】：

您遇到的第一个问题是，一般来说，您应该在单选按钮中强制使用默认值，使其中一个按钮已被“选中”，并且您永远不会将空值传递给表单检查器。大多数人希望他们的单选按钮已经检查了默认值，这是 Web 开发中的标准做法。

但是，如果您需要检查 null 或 undefined，您应该使用 typeof 并使用 ===

进行严格比较

 (typeof y === "undefined" || y === null);

阅读您的评论后 - 我注意到另一件事。您是否尝试通过像 onclick 函数一样读取 DOM 来直接从 Javascript 获取值？您将无法执行此操作，因为您实际上并没有通过这条线获得您的检查值。

var y=document.forms["rsvpform"]["receptionattend"].checked;

相反，尝试这样的事情。

var y = document.getElementsByName('receptionattend');
var y_value;
for(var i = 0; i < y.length; i++){
    if(y[i].checked){
       y_value = y[i].value;
   }
}

y_value 现在应该返回选中单选按钮的结果。如果未检查任何内容，则 y_value 将为空。

【讨论】：

我已经尝试过使用它，但即使我选择了一个选项，我仍然会收到一条错误消息。
在旁注中，我不同意您应该默认选中单选按钮的笼统声明。有时您希望用户必须实际考虑他们在做什么。通常，出于懒惰/无知/冷漠，用户会将单选按钮保留在默认状态。例如，在调查中，您希望用户明确选择答案。
很高兴它对你有用，阿什利！ @Jon P - 单选按钮组代表许多选择中的一个，例如单选列表或下拉列表。最好总是选择一个单选按钮。参考 [link]w3.org/TR/html401/interact/forms.html#radio 如果您需要确保用户做出选择，您可以让预先选择的选项为“未指定”，类似于空或“--Select one--”中的第一个元素一个下拉菜单。没有预先选择的选项有点奇怪，因为这样您就有了一个用户无法返回的状态。一旦他做出了选择，就无法撤消。
我同意大多数次你应该设置一个默认值，但我不同意你应该总是设置一个默认值。我会在 90-95% 的时间里设置默认值。例如，我不会显示不是有效选择的单选按钮，例如您的“未指定”，然后通过验证通知用户它不是有效选择。对我来说，这比不预先选择一个选项更糟糕。我知道我在这里反对规范并将其留在那里，因为这不是进行长时间辩论的论坛。

【解决方案3】：

我不会为此建议使用jquery。但是如果您最终使用 jquery，它会使这种验证变得非常容易。

HTML注意标签的使用，这只是一个好习惯，这意味着您的使用可以点击文本和一大堆其他可访问性奖金。

<span class="formbold">Will you be attending the ceremony and reception?</span><br/>
<input type="radio" name="receptionattend" value="yesboth" id="rcBoth" /><label for="rcBoth">Yes, both!</label><br/>
<input type="radio" name="receptionattend" value="yesc" id="rcCOnly" /><label for="rcCOnly"> Yes, but only the ceremony! </label><br/>
<input type="radio" name="receptionattend" value="yesr" id="rcROnly" /><label for="rcROnly">Yes, but only the reception!</label><br/>
<input type="radio" name="receptionattend" value="no" id="rcNo" /><label for="rcNo"> No, you guys are lame!</label><br />
<input type="button" value="Validate Me" id="btnValidate"/>

Javascript/Jquery 将其连接到 jquery $(document).ready 事件中。

$("#btnValidate").click(function(){
    //The following selector is not very efficient, classes 
    //or a bounding element (eg div or fieldset) would be better
    if($("input[name='receptionattend']:checked").length == 0)
    {
        alert("Please tell us if you're attending or not!");
    }
});

http://jsfiddle.net/wpMvp/

分解脚本

$("#btnValidate").click(function(){}); 将 onlclick 事件处理程序添加到 ID 为 btnValidate 的按钮
$("input[name='receptionattend']:checked").length 返回检查了多少名称为 receptionattend 的输入元素
其余的应该是仙女不言自明

【讨论】：