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
        });

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
        });

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 16, 2019 at 4:59 ashwin karkiashwin karki 67355 gold badges2121 silver badges3939 bronze badges 2

• 3 Possible duplicate of Html 5 Form validation without Form – Cue Commented Jan 16, 2019 at 5:02
• 1 input/button typesubmit works for form only. Mean it submits the parent form. if you do not have any form, submit will not work. as you are saying for some reason in html you don't want to wrap in form then using javascript wrap it. but to trigger the form submit you must have form, yes if you want to check the validation on each field individual then of course you can refer the above link by @Cue – Deepak Sharma Commented Jan 16, 2019 at 5:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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
}

Use element.reportValidity() to both validate AND show the popup if it fails.

https://developer.mozilla/en-US/docs/Web/API/HTMLInputElement/reportValidity

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./misotahupu/edit?html,js,console,output

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