如何检查表单中所需的单选和复选框输入，然后在选中或取消选中时显示消息？

Question

我为用户实现了一些用户反馈。如果必填字段为空，则会出现一些错误消息，提醒用户输入为空

我整个周末都在为此工作。对于空的"文本"值，我得到了正确的反馈。我很难检查空复选框和无线电输入。默认情况下，当您单击提交/检查时，您会收到空"文本"字段的正确错误消息，但不会收到单选框和复选框项目的错误消息

---

我的代码：HTML

<form id="my-form" class="form" action="/" method="post">
<div class="form-row">
<label for="name" class="form-label">Name *</label>
<div class="form-field">
<input id="name" name="name" placeholder="Please enter your name" type="text" required>
</div>
</div>
<div class="form-row">
<label for="email" class="form-label">Email *</label>
<div class="form-field">
<input id="email" name="email" placeholder="Please enter your email address" type="email" required>
</div>
</div>
<div class="form-row">
<label for="radio" class="form-label">Radio Buttons *</label>
<div class="form-field">
<span class="form-radios">Select 1: </span>
<input id="radio" name="radiobutton" value="selection-one" type="radio" required>
<span class="form-radios">Select 2: </span>
<input name="radiobutton" value="selection-two" type="radio">
</div>
</div>
<div class="form-row">
<label for="checkbox" class="form-label">Checkboxes *</label>
<div class="form-field">
<span class="form-radios">Select 1: </span>
<input id="checkbox1" name="checkbox" type="checkbox" value="checkbox1value" required>
<span class="form-radios">Select 2: </span>
<input id="checkbox2" value="checkbox2value" name="checkbox" type="checkbox">
</div>
</div>
<div class="form-row">
<label for="tel" class="form-label">Telephone *</label>
<div class="form-field">
<input id="tel" name="telephone" placeholder="Please enter your number" type="tel" required>
</div>
</div>
<div class="form-row">
<label for="website" class="form-label">Website *</label>
<div class="form-field">
<input id="website" name="website" placeholder="Begin with https://" type="url" required>
</div>
</div>
<div class="form-row">
<label for="message" class="form-label">Message *</label>
<div class="form-field">
<textarea id="message" name="How long were you away for?" placeholder="Include all the details you can" required></textarea>
</div>
</div>
<div class="form-row">
<button id="check" name="submit" type="submit" class="form-submit">Send Email</button>
</div>
</form>

JAVASCRIPT

const requiredElements = document.getElementById("my-form").querySelectorAll("[required]"),   
submitButton = document.getElementById("check"),
errorMsgOutput = document.getElementById("output");

submitButton.addEventListener("click", function() {
var errorMsg = "";
var radios = document.getElementById("my-form").radiobutton;
var checboxes = document.getElementById("my-form").checbox;
for (var i = 0; i < requiredElements.length; i++) {
var form = requiredElements[i];
// Checking for empty text fields
if (form.value.length) {
errorMsg += form.name + ": " + "Filled" + "<br>";
} else if (form.value.length === 0) {
errorMsg += form.name + ": " + "Not Filled" + "<br>";
}
// My attempt to check that radio values are filled. By default, the error message says that it's checked ('filled') even when it's not.
// for(var j = 0, k = radios.length; j < k; j++){
//  if (form.type == 'radio' && radios[k].checked) {
//       errorMsg += form.name + ": " + "Filled" + "<br>";
//   } else {
//       errorMsg += form.name + ": " + "Not Filled" + "<br>";
//   }
// }
}
errorMsgOutput.innerHTML = errorMsg;
});

甚至在您单击发送电子邮件按钮之前，复选框和单选输入就会显示"已填充"的错误消息。请参阅：https://jsfiddle.net/krisixco/zgdf2sec/10/看看我的意思。。。

Answer 1

在我看来，你问了两个问题。第一个是为什么required不显示单选框和复选框的弹出窗口，第二个是如何检查它们是否由javascript填充。

关于第一个问题，在你在问题中输入的代码中，复选框和无线电输入没有所需的属性

对于第二个问题，使用检查方法

示例：

let checkbox = document.querySelector('input[type=checkbox]')
if(checkbox.checked){
// checked
else {
// not checked
}

Answer 2

for (var i = 0; i < requiredElements.length; i++) {
var form = requiredElements[i];
// Checking for empty text fields
if(form.name === "radiobutton" || form.name === "checkbox" ){
if(!form.checked) errorMsg += form.name + ": " + "Not Filled" + "<br>";
if(form.checked) errorMsg += form.name + ": " + "Filled" + "<br>";

} else{
if (form.value.length) {

errorMsg += form.name + ": " + "Filled" + "<br>";
} else if (form.value.length === 0) {
errorMsg += form.name + ": " + "Not Filled" + "<br>";
}
}