How to trigger the html5 validation without using <form> element?

Question

I have normal form which looks like this(You can ignore the inside fields as they are all input fields):

<div class="col-md-12" style="float: none;">
   <div class="form-group row">
      <div class="col-md-6" style="border: 2px solid #efefef;">
         <div class="card-body">
            <div class="col-md-12">
               <h4>Type</h4>
            </div>
         </div>
      </div>
      <div class="col-md-6" style="border: 2px solid #efefef;">
         <div class="card-body">
            <div class="form-group row ">
               <div class="col-md-4">
                  <label>Appeal Reason</label>
               </div>
               <div class="col-md-3">
                  <label>Appeal Amount</label>
               </div>
               <div class="col-md-3">Penalty</div>
               <div class="col-md-2"></div>
               <div class="col-md-4">
                  <input type="text"
                     class="form-control"
                     id="applReason" 
                     name="applReason" required> <span
                     id="fromDateError" style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-3">
                  <input type="number"
                     class="form-control"
                     id="applAmount" name="applAmount"
                     required>
                  <span id="toDateError" style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-3">
                  <input type="number" class="form-control" id="applPenalty"
                     name="applPenalty" required> <span
                     id="consignmentNoError"
                     style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-2">
                  <button type="submit">+</button>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-12">
      <h5>Remarks</h5>
      <textarea rows="4" cols="100">

     </textarea>
   </div>
   <button type="submit"  id="sub" class="btn btn-success pull-right">Submit</button>
</div> 

Due to some reasons,I have not wrapped all these fields inside <form></form> tag but when I perform the submit operation by clicking the <button type="submit" id="sub" class="btn btn-success pull-right">Submit</button> ,it is not performing html5 validation. This on click function is trigerred and it is getting posted.How to validate html5 features without using <form> tag?

$( "#sub" ).click(function() {
          alert( "Handler for .click() called." );
       //ajax code to submit
        });

Answer 1

You can use the constraint validation API for that. Refer this . Example-

var emailId = document.getElementById("id");
var valid = emailId . checkValidity();
if (valid) {
//perform operation
}

Answer 2

Form validations will be triggered by buttons inside a form automatically. But for manual triggering you can use checkValidity . Here's a sample bin for that case:

https://jsbin.com/misotahupu/edit?html,js,console,output

You probably shouldn't be doing HTML5 validation without the <form> element. Here's more literature on forms