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

Question

Basically, I've tried to create a form which when completely filled and submit is clicked a new form is revealed in it's place.

Although the complete and reveal works. The validation doesn't seem to, as I'm wanting the form to force the user to complete certain fields prior to advancing the user to the next form,

my code is below:

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>

When I add type submit to the input button and method="post", the validation still doesn't work and rather than allowing the user to enter information into the newly appeared form it simply disappears quickly

Answer 1

Validations are Kicked in when Submit button is clicked in HTML5. You need to validate the code using your own script if you want to get the code validated. One thing you may try is to make a submit button and on clicking the submit check the validity and do the indented. The Code may look like this. I have not tried it.. but you can try it.

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

Answer 2

The problem is in this line:

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

While you meant for it to appear as Button actually, it is rendered out like a text box .

jsFiddle

Here is what I did.. Since, you never want to submit anything yet, (only to trigger a scripted function), then you can use any element for that. I used <div> to act as a button.

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

Then I added the CSS styling attributes for this div as follows:

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

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

I also modified your code, since you already have jQuery, why use getElementById anymore? These lines:

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

became:

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

}

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