如何获得所需的自动对焦验证以在 html 表单上工作?- 我的尝试无法验证

How can I get my required autofocus validation to work on html form? - My attempt won't validate

本文关键字：验证 工作 表单 我的 html 何获得      更新时间：2023-09-26

基本上，我试图创建一个表单，当完全填写并提交时

，单击一个新表单。

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

我的代码如下：

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

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>

.HTML：

    <form name="bookroom" >
        <input type="text" id="datefrom" name="book_date_from" placeholder="Please enter check in date" value="Check In" class="datepicker" readonly="true" required autofocus>
        <input type="text" id="dateto" name="book_date_to" placeholder="Please enter check out date" value="Check Out" class="datepicker" readonly="true" required autofocus>
        <div class="select-wrapper">
            <select id="adults" name="book_room_adults" placeholder="Please enter number of adults" required autofocus>
                <option value=" none">
                    Adults</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div class="select-wrapper">
            <select id="children" name="book_room_children" placeholder="Please enter number of children" required autofocus>
                <option value="none">Children</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <input class="bookbutton" value=" check availability" onclick=" change1(); ">
    </form>

</div>
<div class="home-reservation-box" id="CalendarSelect2">
    <form name="bookroom">
        <input type="text" id="Name" name="book_date_from" value="Name" required autofocus>
        <input type="text" id="Surname" name="book_date_to" value="Surname" required autofocus>
        <input type="text" id="Phone" name="book_date_from" value="Phone">
        <input type="text" id="E-Mail" name="book_date_to" value="E-Mail" required autofocus>
        <input class="bookbutton" value="Check Availability" onclick=" change2(); ">
    </form>

</div>
<div class="home-reservation-box" id="CalendarSelect3">
    <p>Thanks for your request for a reservation. We're checking availability and we'll get back to you as soon as possible.</p>

</div>

当我将类型提交添加到输入按钮和method="post"时，验证仍然不起作用，而不是允许用户在新出现的表单中输入信息，它只是迅速消失

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

$('[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(); } });

问题出在这一行：

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

虽然你的意思是让它看起来很Button，但它像text box一样呈现。

js小提琴

这是我所做的..因为，你永远不想提交任何东西，（只是为了触发脚本函数），那么你可以使用任何元素来做到这一点。我用<div>充当按钮。

<div class='button' onclick="change1();">Check Availability!</div>

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

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

我也修改了你的代码，既然你已经有了jQuery，为什么还要用getElementById呢？这些行：

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";
    }

成为：

function change1() {
  alert('change1() is called');
  $('#CalendarSelect').hide();
  $('#CalendarSelect2').show();
}
function change2() {
  alert('change2() is called');
  $('#CalendarSelect2').hide();
  $('#CalendarSelect3').show();
}
相关文章：