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

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
– Deepak Sharma, Commented Jan 16, 2019 at 5:03

ellipsis · Accepted Answer · 2019-01-16 05:03:36Z

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
}

answered Jan 16, 2019 at 5:03

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henry Over a year ago

How to popup error message window just as same as submit the form if invalid?

Dror Bar Over a year ago

I would also like to know how to trigger the validation popup message.

Alex from Jitbit · Accepted Answer · 2024-03-19 15:54:38Z

1

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

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

answered Mar 19, 2024 at 15:54

Alex from Jitbit

62.3k19 gold badges215 silver badges177 bronze badges

Comments

bruhbruh · Accepted Answer · 2019-01-16 05:20:03Z

-1

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

edited Jan 16, 2019 at 5:20

answered Jan 16, 2019 at 5:11

bruhbruh

3211 silver badge14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related