我想使用 JavaScript 以 HTML 格式验证我的表单,特别是检查用户是否单击了任一单选按钮。我的部分代码如下:
HTML:
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label><BR>
<p><label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
JavaScript:
function isUnitSelected(){
var selected = false;
var isCOS10011 = document.getElementById("COS10011").checked;
var isCOS60004 = document.getElementById("COS60004").checked;
var isCOS60007 = document.getElementById("COS60007").checked;
if (isCOS10011 || isCOS60004 || isCOS60007)
selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
else{
selected = false;
gErrorMsg = gErrorMsg + "Select a sex for your cat\n"
}
return selected;
}
答案 0 :(得分:0)
您可以简单地向组中的一个单选按钮添加一个 required
属性,它会触发本机验证:
<form action="#">
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" required>COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button>submit</button>
</form>
JS 版本:
function isUnitSelected() {
const radios = document.querySelectorAll('input[name="unit"]');
const selected = [...radios].some(radio => radio.checked);
if (!selected) {
let gErrorMsg = "Select a sex for your cat\n";
console.log(gErrorMsg);
}
return selected;
}
<form action="#" onsubmit="return isUnitSelected()">
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button>submit</button>
</form>
答案 1 :(得分:0)
您可以使用 document.getElementsByName
来做到这一点。
function checkIt(){
let unit=document.getElementsByName("unit");
let selected = false;
for (let i=0;i<unit.length;i++){
if (unit[i].checked){
selected = true;
break;
}
}
if (!selected){
gErrorMsg = gErrorMsg + "Select a sex for your cat\n";
alert(gErrorMsg);
}
return selected;
}
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" >COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
<br/>
<p>
<label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="tutor1" selected="selected">Tutor 1</option>
<option value="tutor2">Tutor 2</option>
<option value="tutor3">Tutor 3</option>
</select>
</p>
</fieldset>
<button onclick="checkIt()">Go</button>
答案 2 :(得分:0)
工作很棒
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
<legend>Your unit</legend>
<label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
<label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
<label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio" value="3">COS60007</label><BR>
<p><label>Your Tutor: </label>
<select name="tutor" id="tutor">
<option value="1" selected="selected">Tutor 1</option>
<option value="2">Tutor 2</option>
<option value="3">Tutor 3</option>
</select>
</p>
</fieldset>
</body>
<script>
$(document).ready(function () {
$('.radio').click(function () {
selectElement('tutor', $(this).val());
});
});
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
</script>
</html>