在我的表单中,我有两个单选按钮,页面有一个脚本用于验证表单本身,直到单选按钮为止。因此,如果您满足单选按钮之前的所有条件,您将能够提交表单,因此我自然希望确保用户在提交表单之前选择一个选项。
我找到了一个可以在这里执行此操作的函数:Radio button validation in javascript
我已经根据最佳答案调整了脚本以适合我当前的脚本,但它不起作用。它要么崩溃,要么显示错误,但仍然转到提交页面。
我尝试做与答案测试参数完全相反的事情,因为答案使用 var formValid = false;
我用valid = true;
.
我已经注释掉了函数的单选按钮检查部分,并将其返回到默认参数(并清除了答案对大括号的错误使用)。
function checkForm() {
var valid = true;
var radios = document.getElementsByName("smoking");
if (!retext.test(document.myform.textfield.value)) {
document.myform.textfield.style.border = "3.5px solid red";
document.getElementById("text").innerHTML = "Invalid text.";
document.getElementById("text").style.display = "block";
valid = false;
}
if (!re.test(document.myform.email.value)) {
document.myform.email.style.border = "3.5px solid red";
document.getElementById("emailwarn").innerHTML = "Invalid email.";
document.getElementById("emailwarn").style.display = "block";
valid = false;
}
if (!retel.test(document.myform.tel.value)) {
document.myform.tel.style.border = "3.5px solid red";
document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
document.getElementById("telwarn").style.display = "block";
valid = false;
}
/*var i = 0;
while (!valid && i < radios.length) {
if (radios[i].checked) {
valid = true;
}
i++;
}
if (!valid) {
document.getElementById("radiowarn").innerHTML = "Please select one.";
document.getElementById("radiowarn").style.display = "block";
}*/
return valid;
}
<小时/>
<form name="myform" method="POST" action="http://manutd.com" onsubmit="return checkForm()">
<fieldset>
<legend>Hi</legend>
<label>Random text: </label>
<input type="text" name="textfield">
<div id="text"></div>
<label>Email: </label>
<input type="email" name="email">
<div id="emailwarn"></div>
<label>Tel: </label>
<input type="tel" name="tel" maxlength="11">
<div id="telwarn"></div>
<label>Smoking: </label>
<input type="radio" name="smoking" value="1">
<label>Non-smoking: </label>
<input type="radio" name="smoking" value="2">
<div id="radiowarn"></div>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</fieldset>
</form>
最佳答案
$(document).ready(function () {
$('.smoking').on('change', function () {
var radiosSmoking = document.getElementsByName('smoking');
if (radiosSmoking[0].checked) {
console.log('smoking checked')
} else if (radiosSmoking[1].checked) {
console.log('no smoking checked')
}
});
});
另一种选择:
var radiosSmoking = document.getElementsByName('smoking');
if (!(radiosSmoking[0].checked || radiosSmoking[1].checked)) {
valid = false;
}
希望这有帮助。
关于JavaScript - 检查单选按钮是否被选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21183353/