Как проверить наличие необходимых радио и флажков в форме, а затем отобразить сообщение, если они отмечены или не отмечены? - PullRequest
Новая
       31

Как проверить наличие необходимых радио и флажков в форме, а затем отобразить сообщение, если они отмечены или не отмечены?

0 голосов
/ 26 апреля 2020

Я реализовал некоторые отзывы пользователей. Если обязательные поля пусты, появятся некоторые сообщения об ошибках, чтобы предупредить пользователей о том, что входные данные пусты.

Я работал над этим все выходные. Я получаю правильную обратную связь для пустых «текстовых» значений. Я с трудом проверяю пустые флажки и радиовходы. По умолчанию при нажатии кнопки «Отправить / проверить» вы получаете правильное сообщение об ошибке для пустых «текстовых» полей, но не для радио и элементов флажков.

Мой код: 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/, чтобы понять, что я имею в виду ...

Ответы [ 2 ]

2 голосов
/ 26 апреля 2020

Мне кажется, что вы задаете два вопроса. Во-первых, почему требуемый не отображает всплывающее окно для радио и флажок, а во-вторых, как проверить, были ли они заполнены или нет javascript.

О первом вопросе в коде Вы задаете свой вопрос, флажок и радиовходы не имеют обязательного атрибута

. Для второго вопроса используйте проверенный метод

пример: 

let checkbox = document.querySelector('input[type=checkbox]')

if(checkbox.checked){
  // checked
else {
  // not checked
}
1 голос
/ 26 апреля 2020 
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>";
            }
    }
...