Question

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

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

Answer 1

您遇到的第一个问题是，一般情况下，您应该在单选按钮中强制使用默认值，使其中一个按钮已经“已选中”，并且您永远不会将空值传递给表单检查器。大多数人都希望他们的单选按钮已经检查过默认值，这是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将为null。

Answer 2

这一行：

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

根据元素的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

Answer 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

btnValidate

$("input[name='receptionattend']:checked").length返回检查名称为receptionattend的输入元素的数量
其余应该是仙女自我解释

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

3 个答案: