title: How can I get my required autofocus validation to work on html form? - My attempt won't validate
body: <p>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. </p>
  
  <p>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, </p>
  
  <p>my code is below:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>  &lt;style&gt;
          .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;
          }
    &lt;style&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong>
      
      
      </p>
  
  <pre><code>&lt;script&gt;
      $(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";
      }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong>
     </p>
  
  <pre><code>    &lt;form name="bookroom" &gt;
  
          &lt;input type="text" id="datefrom" name="book_date_from" placeholder="Please enter check in date" value="Check In" class="datepicker" readonly="true" required autofocus&gt;
          &lt;input type="text" id="dateto" name="book_date_to" placeholder="Please enter check out date" value="Check Out" class="datepicker" readonly="true" required autofocus&gt;
  
          &lt;div class="select-wrapper"&gt;
              &lt;select id="adults" name="book_room_adults" placeholder="Please enter number of adults" required autofocus&gt;
  
                  &lt;option value=" none"&gt;
                      Adults&lt;/option&gt;
                  &lt;option value="0"&gt;0&lt;/option&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="select-wrapper"&gt;
              &lt;select id="children" name="book_room_children" placeholder="Please enter number of children" required autofocus&gt;
  
                  &lt;option value="none"&gt;Children&lt;/option&gt;
                  &lt;option value="0"&gt;0&lt;/option&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;input class="bookbutton" value=" check availability" onclick=" change1(); "&gt;
      &lt;/form&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="home-reservation-box" id="CalendarSelect2"&gt;
  
      &lt;form name="bookroom"&gt;
  
          &lt;input type="text" id="Name" name="book_date_from" value="Name" required autofocus&gt;
          &lt;input type="text" id="Surname" name="book_date_to" value="Surname" required autofocus&gt;
          &lt;input type="text" id="Phone" name="book_date_from" value="Phone"&gt;
          &lt;input type="text" id="E-Mail" name="book_date_to" value="E-Mail" required autofocus&gt;
  
          &lt;input class="bookbutton" value="Check Availability" onclick=" change2(); "&gt;
  
      &lt;/form&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="home-reservation-box" id="CalendarSelect3"&gt;
  
      &lt;p&gt;Thanks for your request for a reservation. We're checking availability and we'll get back to you as soon as possible.&lt;/p&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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 </p>