我在一种形式中有两组单选按钮。如果您没有选中每组一个单选按钮,则您不应该能够发送该表单。如果可能的话,我想要一个仅包含 JS 的解决方案(没有 jQuery)。我在这里的一个旧问题中发现了一个有用的功能,并尝试将其适应我的情况,但我显然失败了。我的错误在哪里?
<form>
<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> />
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> />
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> />
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> />
<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> />
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> />
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> />
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> />
<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne(); return validateDateTwo();'/>
</form>
<script>
function validateDateOne() {
if (!$("input[name='date_1']:checked").val()) {
alert('Please choose your favourite date');
return false;
}
else {}
}
function validateDateTwo() {
if (!$("input[name='date_2']:checked").val()) {
alert('Please choose a second date');
return false;
}
else {}
}
</script>
最佳答案
在函数 validateDateOne()
的 else 条件内使用 retrun 语句调用函数 validateDateTwo()
,而不是在 onclick 中调用它。
对于纯JS解决方案,我使用querySelector
而不是$
。
function validateDateOne() {
if (!document.body.querySelector("input[name='date_1']:checked")) {
alert('Please choose your favourite date');
return false;
}
else {
return validateDateTwo();
}
}
function validateDateTwo() {
if (!document.body.querySelector("input[name='date_2']:checked")) {
alert('Please choose a second date');
return false;
}
else {}
}
<form>
<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" />2017-10-27
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" />2017-10-28
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-10-28" />2017-10-28
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" />2017-11-04
<br/>
<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" />2017-10-27
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" />2017-10-28
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" />2017-10-28
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" />2017-11-04
<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne();'/>
</form>
关于javascript - 如何使用 JavaScript 验证一种表单中的两组单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44323808/