一个javascript提示会覆盖另一个提示，我必须单击提交两次才能发送表单

Question

我正在尝试创建一个表单，该表单将（a）提示用户填写缺少的字段，以及（b）提示用户检查至少一个复选框。但不知何故，textbox.setCustomValidity('Choose at least one.');总是覆盖提示e.target.setCustomValidity("Fill in the missing field");。

Chromium还有一个问题。看起来我必须单击“提交”按钮两次才能提交...

＆＃13;

＆＃13;

//Function that checks if any input text field is empty and prompts user
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("Fill in the missing field");
                    }
                };
                elements[i].oninput = function(e) {
                    e.target.setCustomValidity("");
                };
            }
});


//Functions which checks if at least one checkbox is checked and prompts user to check at least one
function chooseKrozek() {
            if (document.querySelectorAll('input[name="krozek"]:checked').length > 0){
                document.querySelector("#krozki-checkbox-placeholder").value = document.querySelector('input[name="krozek"]:checked').value;
            }
            else {
                document.querySelector("#krozki-checkbox-placeholder").value = "";
            }
}   

function promptIzberiKrozek(textbox) {
            if (textbox.value == ''){
                textbox.setCustomValidity('Choose at least one.');
            }
            else {
                textbox.setCustomValidity('');
            }
}

＆＃13;

<form target="_blank">

name:<br>
<input class="vnos" type="text" name="ime" value="" required><br>
surname:<br>
<input class="vnos" type="text" name="priimek" value="" required>

<br><br>

checkboxes:<br>
<!-- placeholder to be able to display the prompt on invalid value -->
<input id="krozki-checkbox-placeholder" type="text" value="" oninvalid="promptIzberiKrozek()" required style="width:5px;height:5px;opacity:0;position:absolute;"/>
                    
<!-- On checkbox click function chooseKrozek() is called -->
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-c-arm">LINUX/C/ARM™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-desktop">LINUX/DESKTOP™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-office">LINUX/OFFICE™

<br><br>

<input type="submit" value="Submit">
</form>

＆＃13;

＆＃13;

＆＃13;