一步一步登记表

Question

我的html中有这样的代码，当系统检测到空时，它将验证input=type --在接下来的步骤中，我将如何禁用它？因为我的一些领域不是必需的。

例如，需要输入类型< input placeholder="Firstname" oninput="this.className = ''" name="MotherFirstname">，而不需要< input placeholder="Middlename" oninput="this.className = ''" name="MotherMiddlename">。如果用户填写的是名字，而不是中间名，那么它将继续下一步，

<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>

这是我的web控制台中的错误：

​

​

从这一行：

​

​

Answer 1

Javascript不需要#或点通道

y = x[currentTab].getElementsByTagName("#input");

至

y = x[currentTab].getElementsByTagName("input");

同样在您的图像中，如果您将id设置为输入，则为getElementById("input")。

Answer 2

您可以在html标记中使用required属性，它将是自动要求的，您可以将不需要的属性保留为空。

参见此JSFiddle：https://jsfiddle.net/hbjrya45/2/