JavaScript 单选按钮 html Web 表单答案

【问题标题】：JavaScript radio buttons html web formJavaScript 单选按钮 html Web 表单
【发布时间】：2014-05-16 15:35:48
【问题描述】：

我目前正在使用 html 来编写“表单条目”。我还使用 JavaScript 验证来验证表单的输入。目前，我有“姓名”、“主题”和“考试编号”，每一个都可以正常工作并进行功能验证。对于“资格”字段，我有单选按钮，用户必须单击选择他们的资格。我已经进行了验证，但不幸的是，当提交表单并且“资格”留空时，我无法使该字段以红色突出显示并显示错误消息。除了资格字段之外，一切都有效。如果有人可以修复“资格”的验证，这样当字段为空时，文本将突出显示并包含错误消息，那将是很棒的。谢谢

这是我的代码：

<html>
<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}

function validateForm(e) {

var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}

if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}

if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.group1.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
document.getElementById('Examination_number').style.color="red";
result = false;
}

if (msg != "") {
alert(msg);
}

return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return     validateForm();">
<table width=”50%” border=”0”> 
<tr>
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
</tr>
<tr>
    <td id="subject">Subject</td>
    <td><input type="text" name="subject" /></td>
</tr>
    <td id="Examination_number">Examination number</td>
    <td><input type="text" maxlength="4" name="Examination_number" /></td>
</tr>
<tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td id="radioqual">
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE<br>
<input onclick="qualinform('AS');" type="radio" name="group1" value="AS">AS<br>
<input onclick="qualinform('A2');" type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>

</html>

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

group1单选按钮在没有选中时的返回值是未定义的，不是你所期望的“”，所以你需要在if语句中改变条件

if (document.ExamEntry.group1.value==undefined)

【讨论】：