пошаговая форма регистрации

Question

У меня есть этот код в моем html, который проверяет input = [type] , когда система обнаружит пустым, что он не будет работать на следующем шаге, как мне отключить его? потому что часть моего поля не обязательна.

например, тип ввода is требуется и не требуется. если пользователь введет имя , а не middlename , он перейдет к следующему шагу,

<tr>
    <td>
        <label for="landmark-formbuilder-0" class="form-control-label mbr-fonts-style display-7"><strong>Contact number *</strong></label>
         <input id="input" placeholder="Firstname" oninput="this.className = ''" name="MotherFirstname">
    </td>
    <td>
        <label for="landmark-formbuilder-0" class="form-control-label mbr-fonts-style display-7"><strong>Middlename *</strong></label>
        <input placeholder="Middlename" oninput="this.className = ''" name="MotherMiddlename">
    </td>
    <td>
        <label for="landmark-formbuilder-0" class="form-control-label mbr-fonts-style display-7"><strong>Lastname *</strong></label>
        <input placeholder="Lastname" oninput="this.className = ''" name="MotherLastname">
    </td>
</tr>

, это мой сценарий

<script>
    function validateForm() {
      // This function deals with validation of the form fields
      var x, y, i, valid = true;
      x = document.getElementsByClassName("tab");
      y = x[currentTab].getElementsByTagName("#input");
      // A loop that checks every input field in the current tab:
      for (i = 0; i < y.length; i++) {
        // If a field is empty...
        if (y[i].value == "") {
          // add an "invalid" class to the field:
          y[i].className += " invalid";
          // and set the current valid status to false
          valid = false;
        }
      }
      // If the valid status is true, mark the step as finished and valid:
      if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      return valid; // return the valid status
    }

    </script>

это ошибка, которую я получаю в своей консоли

из этой строки

Я знаю, это довольно простой вопрос, но я не знаю, как решить этот вопрос, я не очень хорош в jquery / javascript. Пожалуйста, помогите мне настроить эту проблему.

Answer 1

Во-первых, ваш getElementById ищет элемент " .input ", но он должен искать " input ".

Во-вторых, getElementsByTagName ("# вход "); <- имя вашего тега не "#input" </p>

И, наконец, если у вас есть необязательное поле, проверьте, предоставлено оно или нет. Если он пуст, продолжайте l oop без проверки.

e.g something like
for ( yourInput in inputs ) {
    if (!yourInput.value && !yourInput.required) { continue; }
}