如果表单未选中无线电，则发出警报
[英]Alert if radios unchecked on form submit
问题描述
我正在尝试在提交表单以进行验证之前检查是否选中了两个单选按钮之一。
<body onload="init();">
<form name="myForm" onsubmit="return validateForm();">
<label for="cName">Client Name*</label><br>
<div style="width:74.8%; display:inline-block;">
<input type="text" id="cName" name="cName" placeholder="Client Name..." required>
</div><div style="width:25.2%; display:inline-block;">
<select class="select1" id="cRecord" name="cRecord" required>
<option value="" disabled selected>Advised Recording...
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
Yes <input required type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<div class="buttons">
<input type="button" id="formOut" onclick="this.form.submit();" value="Submit">
</div>
<script>
$('#formOut').click(function validateForm() {
var Name = document.forms["myForm"]["cName"].value;
var Record = document.forms["myForm"]["cRecord"].value;
var yesSME = $("#yesCheck").prop("checked");
var noSME = $("#noCheck").prop("checked");
if (Name == "") {
alert("//Alert Here");
return false;
}
if (Record == "") {
alert("//Alert Here");
return false;
}
if (yesSME == false || noSME == false) {
alert("//Alert Here");
return false;
} else if (cName != "" && cRecord != "" && ((yesSME == true) || (noSME == true))) {
// do things here
}
});
<script>
</form>
目前，我发现上面的内容即使选择了单选选项，用户在提交表单时也会收到警报。
编辑：
期望的行为-如果选择了字段cName ， cRecord和一个收音机，则用户单击“提交”按钮后，将打开Modal。
当前行为-如果选择了字段cName ， cRecord和一个cName按钮，则用户单击“提交”按钮时， cRecord单选按钮给出警报。
如果单击“提交”按钮时，字段cName或cRecord一个或两个都没有用户输入，则将为cName或cRecord字段给出警报。
如果我取消选中单选按钮的检查功能，则该功能（打开模式）将正常工作，
唯一的问题似乎在于检查单选按钮是否被选中/未选中
任何援助将不胜感激。
4 个解决方案
解决方案1
1 已采纳 2018-12-31 01:44:06
**另一个答案（我想保留第一个作为参考）
您可以实现自己想要的：
HTML：
<!DOCTYPE html>
<html>
<body>
<form id="form1" action="javascript:void(0);">
<label for="cName">Client Name*</label><br>
<input type="text" id="cName" name="cName" placeholder="Client Name..."> <br><br>
<select class="select1" id="cRecord" name="cRecord">
<option value="" disabled selected>Advised Recording...
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
Yes <input type="radio" value="Yes" name="TLSME" id="yesCheck">
No <input type="radio" value="No" name="TLSME" id="noCheck"><br>
<input type="submit" id="formSubmit" value="Submit">
</form>
</body>
</html>
JS（JQuery）：
$("#form1").submit(function(){
if (!$("input[name='TLSME']").is(':checked') || $("#cName").val() === '' || $("#cRecord").val() === '') {
alert('Please complete required fields!');
} else {
// your code here
}
});
解决方案2
0 2018-12-30 23:41:14
if(!document.getElementById('yesCheck').checked || !document.getElementById('noCheck').checked) {
alert('Not checked');
}
应该做的把戏
解决方案3
0 2018-12-30 23:59:04
您可以使用JQuery轻松做到这一点：
HTML：
<html>
<body>
<form id="form1" action="javascript:void(0);">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other <br>
<input type="submit">
</form>
</body>
</html>
Javascript：
$("#form1").on("submit", function(){
//Code: Action (like ajax...)
if ($('input[name=gender]:checked').length <= 0) {
alert("No radio checked")
}
})
** 注意：
action="javascript:void(0);"
已添加以防止提交表单（不执行任何操作），您可以在需要采取措施时将其删除。
解决方案4
0 2018-12-31 00:35:11
为什么不使单选按钮成为required
似乎您正在尝试完成浏览器的工作。 您不需要显示警报， 通常这是糟糕的UX ，因为您可以通过required属性使用内置表单验证，如下所示：
<form onsubmit="...">
<input type="radio" name="group" value="1" required />
<input type="radio" name="group" value="2" />
...
<button type="submit">Submit</button>
<form />
注意：您只需要一个required属性，它将应用于所述组中的所有输入。
反转提交时的复选框：仅在未选中复选框的情况下设置HTML表单值
[英]Invert checkbox on submit: Set HTML form value only if checkbox is unchecked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.