0

我需要帮助使用 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;
    }
}

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

4

3 回答 3

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 将为空。

于 2013-10-03T03:05:25.790 回答
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

于 2013-10-03T03:04:12.717 回答
0

我不会为此建议使用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").lengthreceptionattend返回检查了多少名称为 的输入元素
  • 其余的应该是仙女不言自明
于 2013-10-03T04:22:09.847 回答