![](/img/trans.png)
[英]Submit form only if at least one checkbox is checked using javascript
[英]using only javascript to prompt user to choose at least one checkbox
您好,我有一個HTML表單,該表單已經提示用戶填寫空白字段。 這是我正在使用的腳本:
<!-- 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>
該腳本無法正常工作,並且會顯示一個漂亮的提示,如下所示:
它適用於所有輸入文本字段,但是我需要另一個腳本,該腳本將(a)檢查是否至少一個可以在表單底部看到的復選框被選中,並且(b)會彈出一個提示框,其樣式為與上述方法相同。
我查看了其他帖子並編寫了以下腳本。 我通過其ID引用了復選框,並以某種方式使用了上面腳本中的function function(e)
。 好吧,這對我不起作用,但我必須親近...
<!-- 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>
誰能通過不使用JQuery的javascript幫助我解決此問題?
您的e
為null,因為您在if
且不傳遞任何事件的情況下在其中使用了自執行函數。
嘗試將e.target
更改為document.getElementById("linux-office-checkbox")
或其他未選中的元素。
在jQuery中,我會通過執行$('.checkboxClass:checked').length > 0
來檢查是否選中了任何復選框$('.checkboxClass:checked').length > 0
盡管您無法將必填屬性放在復選框組上並進行至少一個選擇的驗證,但這是一種解決方法。 在HTML上進行相應的更改。
它需要一個隱藏的文本框作為所選復選框組的占位符。 如果選擇至少一個,則隱藏字段也將具有該值。
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.