javascript - 逐渐使表单出现问题“名称=''的无效表单控件不可聚焦”

Question

我有一个表单，我试图让它在每次按下下一个时逐渐出现，我有两个问题，首先，有一个我不知道如何修复的错误，它说“名称为无效的表单控件=”不可聚焦。”，我猜这是因为我有必填字段并且它们被设置为隐藏，但我不知道如何修复它，因为我需要在按下下一步之前设置字段，第二个是包含表单的 div 是完整的表单，就像表单都是可见的，如果我使用 display 属性，当表单出现时它的大小会变大，但我无法像我一样进行可见性转换财产，我该怎么办？

<form action="" >
        
                <label for="from"></label>
                 <select name="" id="from" required>
                    <option value selected disabled>select an option</option>
                    <option value="a">a</option>
                    <option value="b">b</option>
                </select>
                <br id="space">
                to: <select name="" id="to" required>
                    <option value selected disabled>select an option</option>
                    <option value="a">a</option>
                    <option value="b">b</option>
                </select>
   
            <br>

            <button id="dateBtn" class="btn">Next</button>
            
            <input id="date" type="date" min="2021-06-21" style="visibility: hidden;" required>

            <br>

            <button id="rangeBtn" class="btn" style="visibility: hidden;">Next</button>
            
            <input type="range" id="range" min="1" max="4" style="visibility: hidden;" required>

            <br>

      

            <button type="submit" id="submitBtn" value="Submit" class="btn" style="visibility: hidden;"> finish up </button>
        
   </form>
    </div>



    <script>
        
            var dateBtn = document.getElementById("dateBtn");
            var date = document.getElementById("date");
            var rangeBtn = document.getElementById("rangeBtn");
            var range = document.getElementById("range");
           
          
            
            
            document.getEelementById("dateBtn").addEventListener("click", showDate()
            {
              date.style.visibility = "visible"; 
              rangeBtn.style.visibiity= "visible"; 
              dateBtn.Style.visibility="hidden";
            });
            
            document.getEelementById("RangeBtn").addEventListener("click", showRange()
            {
              range.style.visibility = "visible";
              timeBtn.style.visibility = "visible";
              rangeBtn.style.visibiltiy ="hidden";
            });
            
    
      
    </script>

标签： javascriptcss