[英]using only javascript to prompt user to choose at least one checkbox
Hello I have a HTML form which already prompts users to fill empty fields. 您好,我有一个HTML表单,该表单已经提示用户填写空白字段。 And this is the script that I am using: 这是我正在使用的脚本:
<!-- Script to prompt users to fill in the empty fields -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("To continue, you must correctly fill in the missing fields.");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
});
</script>
This script works flawlesly and it brings up a nice prompt that looks like this: 该脚本无法正常工作,并且会显示一个漂亮的提示,如下所示:
It works for all the input text fields, but I need another script that will (a) check if at least one checkbox you can see at the bottom of the form is checked, and (b) will bring up a prompt which is styled the same way as the one above. 它适用于所有输入文本字段,但是我需要另一个脚本,该脚本将(a)检查是否至少一个可以在表单底部看到的复选框被选中,并且(b)会弹出一个提示框,其样式为与上述方法相同。
I looked at other posts and wrote the below script. 我查看了其他帖子并编写了以下脚本。 I referenced checkboxes by their IDs and somehow used the function function(e)
from the above script. 我通过其ID引用了复选框,并以某种方式使用了上面脚本中的function function(e)
。 Well it won't work for me but I must be close... 好吧,这对我不起作用,但我必须亲近...
<!-- Script which prompts user to check at least one checkbox -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
if (
document.getElementById("linux-c-arm-checkbox").checked == false &&
document.getElementById("linux-eda-cad-checkbox").checked == false &&
document.getElementById("linux-blender-checkbox").checked == false &&
document.getElementById("linux-photo-checkbox").checked == false &&
document.getElementById("linux-audio-checkbox").checked == false &&
document.getElementById("linux-latex-checkbox").checked == false &&
document.getElementById("linux-desktop-checkbox").checked == false &&
document.getElementById("linux-office-checkbox").checked == false
){
function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please choose at least one checkbox.");
}
}
}
});
</script>
Can anyone help me solve this by using javascript without JQuery? 谁能通过不使用JQuery的javascript帮助我解决此问题?
Your e
is null, because you use self executing function inside if
and does not pass any event for it. 您的e
为null,因为您在if
且不传递任何事件的情况下在其中使用了自执行函数。
Try changing e.target
to document.getElementById("linux-office-checkbox")
or other not-checked element. 尝试将e.target
更改为document.getElementById("linux-office-checkbox")
或其他未选中的元素。
In jQuery I would check if any checkbox is selected by doing $('.checkboxClass:checked').length > 0
在jQuery中,我会通过执行$('.checkboxClass:checked').length > 0
来检查是否选中了任何复选框$('.checkboxClass:checked').length > 0
Though there is no way you can put required attribute on a checkbox group and do the validation for atleast one selection, here is a workaround solution. 尽管您无法将必填属性放在复选框组上并进行至少一个选择的验证,但这是一种解决方法。 Do the changes accordingly on your HTML. 在HTML上进行相应的更改。
It takes a hidden textbox as the placeholder of the selected checkbox group. 它需要一个隐藏的文本框作为所选复选框组的占位符。 If atleast one is selected the hidden field will also have the value. 如果选择至少一个,则隐藏字段也将具有该值。
function setAccount() { if (document.querySelectorAll('input[name="gender"]:checked').length > 0) document.querySelector("#socialPlaceholder").value = document.querySelector('input[name="gender"]:checked').value; else document.querySelector("#socialPlaceholder").value = ""; } function invalidMsg(textbox) { if (textbox.value == '') { textbox.setCustomValidity('Please select at least one account'); } else { textbox.setCustomValidity(''); } }
<form target="_blank"> <b>Accounts</b> <input type="text" id="socialPlaceholder" required value="" style="width:0px;height:0px;position: relative;left:-30px;opacity: 0;" oninvalid="invalidMsg(this)"/><br/> <label>Facebook<input type="checkbox" name="gender" value="facebook" onClick="setAccount()"/></label> <label>Twitter<input type="checkbox" name="gender" value="twitter" onClick="setAccount()"/></label> <label>Google Plus<input type="checkbox" name="gender" value="google_plus" onClick="setAccount()"/></label> <label>Instagram<input type="checkbox" name="gender" value="instagram" onClick="setAccount()"/></label> </br> </br> <input type="submit" value="Submit" /> <br/><br/> NOTE: Submit without selecting any account to see the validation message </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.