title: Validation not working in HTML
body: <p>I have 3 section and each section there are some input filed with required validation.If i clicked on submit button required validation  not working and 1st section goes to 2nd section and same on 3rd section without validation.Please help  me in this.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
    &lt;style&gt;
  .m-div {display: none;}
  
  .m-div.current {
    display: block;
   }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form action="" method="post"&gt;
  
    &lt;section class="m-div current" id="one" &gt;
      &lt;input type="checkbox" name="bklet"  required/&gt; 
      &lt;label for="bklet"&gt; check it&lt;/label&gt;
  &lt;/section&gt;
  
  
  &lt;section class="m-div" id="two"&gt;
     &lt;label&gt; First Name&lt;/label&gt;
      &lt;input type="text" name="Fname" pattern=".{3,}" title="3 characters minimum"  class="input width-full" required&gt;
  
      &lt;label&gt; Last Name&lt;/label&gt;
      &lt;input type="text" name="Lname" pattern=".{3,}" title="3 characters minimum"  class="input width-full" required&gt;              
  &lt;/section&gt;
  
  
  
  &lt;section class="m-div" id="three"&gt;
  &lt;label&gt; Your Message&lt;/label&gt;
  &lt;textarea class="textarea width-full" name="message" required&gt;&lt;/textarea&gt;
  &lt;/section&gt;
  
  &lt;input type="submit" onclick="next();"&gt;
  
  &lt;/form&gt;
  
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function next() {
    var current = $('.current');
    var next = current.next('.m-div:first');
  
    // loop back to the first div
    // if(next.length == 0) { next = $('#one'); }
  
    current.removeClass('current');
    next.addClass('current');
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>