Question

您好我有一个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(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来帮助我解决这个问题吗？

Answer 1

您的e为空，因为您在if中使用自执行功能，并且没有为其传递任何事件。

尝试将e.target更改为document.getElementById("linux-office-checkbox")或其他未经检查的元素。

在jQuery中，我会检查是否通过$('.checkboxClass:checked').length > 0

选择了任何复选框

Answer 2

虽然您无法在复选框组中放置必需属性并对至少一个选项进行验证，但这是一个解决方法。根据您的HTML进行相应的更改。

隐藏文本框作为所选复选框组的占位符。如果选择了至少一个，隐藏字段也将具有值。

＆＃13;

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('');
      }
}

＆＃13;

<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>

＆＃13;

仅使用javascript提示用户选择至少一个复选框

2 个答案: