title: How to trigger the html5 validation without using <form> element?
body: <p>I have normal form which looks like this(You can ignore the inside fields as they are all input fields):</p>
  
  <pre><code>&lt;div class="col-md-12" style="float: none;"&gt;
     &lt;div class="form-group row"&gt;
        &lt;div class="col-md-6" style="border: 2px solid #efefef;"&gt;
           &lt;div class="card-body"&gt;
              &lt;div class="col-md-12"&gt;
                 &lt;h4&gt;Type&lt;/h4&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6" style="border: 2px solid #efefef;"&gt;
           &lt;div class="card-body"&gt;
              &lt;div class="form-group row "&gt;
                 &lt;div class="col-md-4"&gt;
                    &lt;label&gt;Appeal Reason&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="col-md-3"&gt;
                    &lt;label&gt;Appeal Amount&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="col-md-3"&gt;Penalty&lt;/div&gt;
                 &lt;div class="col-md-2"&gt;&lt;/div&gt;
                 &lt;div class="col-md-4"&gt;
                    &lt;input type="text"
                       class="form-control"
                       id="applReason" 
                       name="applReason" required&gt; &lt;span
                       id="fromDateError" style="color: red; font-weight: bold"&gt;&lt;/span&gt;
                 &lt;/div&gt;
                 &lt;div class="col-md-3"&gt;
                    &lt;input type="number"
                       class="form-control"
                       id="applAmount" name="applAmount"
                       required&gt;
                    &lt;span id="toDateError" style="color: red; font-weight: bold"&gt;&lt;/span&gt;
                 &lt;/div&gt;
                 &lt;div class="col-md-3"&gt;
                    &lt;input type="number" class="form-control" id="applPenalty"
                       name="applPenalty" required&gt; &lt;span
                       id="consignmentNoError"
                       style="color: red; font-weight: bold"&gt;&lt;/span&gt;
                 &lt;/div&gt;
                 &lt;div class="col-md-2"&gt;
                    &lt;button type="submit"&gt;+&lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-md-12"&gt;
        &lt;h5&gt;Remarks&lt;/h5&gt;
        &lt;textarea rows="4" cols="100"&gt;
  
       &lt;/textarea&gt;
     &lt;/div&gt;
     &lt;button type="submit"  id="sub" class="btn btn-success pull-right"&gt;Submit&lt;/button&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Due to some reasons,I have not wrapped all these fields inside <code>&lt;form&gt;&lt;/form&gt;</code> tag but when I perform the submit operation by clicking the 
   <code>&lt;button type="submit"  id="sub" class="btn btn-success pull-right"&gt;Submit&lt;/button&gt;</code>,it is not performing html5 validation. This on click function is trigerred and it is getting posted.How to validate html5 features without using <code>&lt;form&gt;</code> tag?</p>
  
  <pre><code>$( "#sub" ).click(function() {
            alert( "Handler for .click() called." );
         //ajax code to submit
          });
  </code></pre>