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

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

即使在您单击发送 email 按钮之前，复选框和单选输入都会显示“已填充”错误消息。 请参阅： 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>";
            }
    }