title: HTML form with 2 steps
body: <p>I have a form, let's say it's like this (it's actually more complicated, but let's just say it's like this):</p>
  
  <pre><code>&lt;form&gt;
      &lt;ul&gt;
          &lt;li class="step1 step_selected"&gt;Step 1. Enter Your Information&lt;/li&gt;
          &lt;li class="step2"&gt;STEP 2. Fine Print&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="step1"&gt;
          &lt;input id="firstName" name="firstName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your First Name')"  onchange="try{setCustomValidity('')}catch(e){}"/&gt;
  
          &lt;input id="lastName" name="lastName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your Last Name')"  onchange="try{setCustomValidity('')}catch(e){}"/&gt;
  
          &lt;input id="continue" name="" type="button" value="CONTINUE TO NEXT STEP" /&gt; 
      &lt;/div&gt;
  
      &lt;div class="step2" style="display:none"&gt;
          &lt;p&gt;All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental.&lt;/p&gt;
          &lt;input name="" type="submit" value="I understand" /&gt;    
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want the form to do basic HTML5 validation on the form when "#continue" is clicked and not allow a click unless the pattern matches, even though it's not a submit button. </p>
  
  <p>If the pattern matches I want it to:</p>
  
  <ol>
  <li>display:none ".step1"</li>
  <li>display:block ".step2"</li>
  <li>change the "step1 stepselected" to "step1"</li>
  <li>change the "step2" to "step2 stepselected"</li>
  </ol>
  
  <p>What's the simplest way to do this and am I doing this the wrong way entirely and I need to be using jquery validation?</p>