Javascript 如何获得所需的自动聚焦验证以处理html表单我的尝试赢了'；无法验证

基本上，我已经尝试创建一个表单，当完全填充并单击提交时，一个新表单就会显示在它的位置上

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

虽然完成和揭示作品。验证似乎没有，因为我希望表单在将用户推进到下一个表单之前强制用户完成某些字段

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

我的代码如下：

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

CSS:

  <style>
        .home-reservation-box {
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
            visibility: hidden;
        }
  <style>

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

·家庭预订箱{
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
过渡：不透明度。25秒缓进缓出；
可见性：隐藏；
}

Javascript:

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

$（函数（）{
$（“.datepicker”）.datepicker（{minDate:0}）；
});
函数change1（）{
document.getElementById（“CalendarSelect”）.style.visibility=“hidden”；
document.getElementById（“CalendarSelect2”）.style.visibility=“visible”；
}
函数更改2（）{
document.getElementById（“CalendarSelect2”）.style.visibility=“hidden”；
document.getElementById（“CalendarSelect3”）.style.visibility=“visible”；
}

HTML:

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

成人
0
1.
2.
3.
4.
5.
儿童
0
1.
2.
3.
4.
5.
谢谢您的预订请求。我们正在检查是否有空房，我们会尽快给您回复

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

---

当我将type submit添加到输入按钮和method=“post”时，验证仍然不起作用，它不允许用户在新出现的表单中输入信息，而是快速消失

当在HTML5中单击提交按钮时，验证被启动。如果要验证代码，需要使用自己的脚本验证代码。您可以尝试的一件事是创建一个提交按钮，然后单击提交检查有效性并执行缩进操作。代码可能如下所示。我没有试过。。但是你可以试试

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

$('[name="bookroom"]').submit(function(event){ if ($(this).checkValidity || $(this).checkValidity()) {
    document.getElementById("CalendarSelect").style.visibility = "hidden";
    document.getElementById("CalendarSelect2").style.visibility = "visible";
    event.preventDefault();

 }else { event.preventDefault(); } }); 

---

问题出在这一行：

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

<input class="bookbutton" value="Check Availability" onclick=" change2(); ">

然后，我为这个div添加了CSS样式属性，如下所示：

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

div.button
{
    margin-top: 10px;
    border: 1px solid black;
    display: inline-block;
    padding: 10px;
   cursor: pointer;    
}

div.button:hover
{
    background-color: gold;
}

我还修改了您的代码，既然您已经有了jQuery，为什么还要再使用

getElementById

？ 这些线路：

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }

成为：

<script>
    $(function() {
        $(".datepicker").datepicker({ minDate: 0 });
    });


    function change1() {
        document.getElementById("CalendarSelect").style.visibility = "hidden";
        document.getElementById("CalendarSelect2").style.visibility = "visible";
    }

    function change2() {
        document.getElementById("CalendarSelect2").style.visibility = "hidden";
        document.getElementById("CalendarSelect3").style.visibility = "visible";
    }


</script>

function change1() {
  alert('change1() is called');
  $('#CalendarSelect').hide();
  $('#CalendarSelect2').show();

}

function change2() {
  alert('change2() is called');
  $('#CalendarSelect2').hide();
  $('#CalendarSelect3').show();
}

---

提交有效吗？我假设您需要表单上的action/method属性，然后才会触发submit，如果没有submit，我就不会期望验证生效。您没有指定

表单类型。。它是
POST
还是
GET
并且提交按钮应该具有
type=“submit”
以允许它将数据发送到服务器参考上述内容，尝试过，没有luck@Ahmad它不是类型，而是方法，默认情况下是GET。维克多也不想有一个提交按钮。我的目的是让脚本生效。你能不能修改上面的内容，以反映你的建议，因为我所做的显然不起作用。