Trigger standard HTML5 validation form without using submit button

Question

Anyone who know how I can trigger the standard HTML5 validation in a form without using a submit button   JavaScript or jQuery    I do not want to send POST GET request  only do the validation

User · Answer

This is my implementation of the solution suggested by @mhm, where I discarded the use of jQuery.

The variable formId contains the id of the form and msg is an object with messages of my application.

This implementation tries to notify the user with the native HTML 5 error messages, if not possible then alert a generic form error message.

If there are no errors I submit the form.

let applyForm = document.getElementById(formId);

if (!applyForm.checkValidity()) {
  if (applyForm.reportValidity) {
    applyForm.reportValidity();
  } else {
    alert(msg.ieErrorForm);
  }
} else {
  applyForm.submit();
}

User · Answer

Short answer  no  there s no way to  trigger  the default functionality of the html5 bubble inline before submission of the form  you can checkValidity   on certain inputs  but again doesn t work as you would want  Short of preventing the default if you still want to submit the form once validation is complete  you can still process this style by doing the following   Note  on forms you don t want the validation css styles to be applied  you can simply add the novalidate attribute to the form   HTML    lt form name  login  id  loginForm  method  POST  gt       lt input type  email  name  username  placeholder  Email  gt       lt input type  password  name  password  placeholder  Password  gt       lt input type  submit  value  LOG IN  class  hero left clearBoth  gt   lt  form gt    If you re not using SCSS  I would highly recommend looking into it  it s much more manageable  easy to write and less convoluted  Note  In the fiddle example  i do have the exact css that this will compile  I ve also included a bubble style example   SCSS   form not  novalidate                  input  textarea                        amp  required                     background  transparent url         images icons red asterisk png   no-repeat 98  center        amp  required valid               background  transparent url         images icons valid png   no-repeat 98  center   include box-shadow 0 0 5px  5cd053  border-color   28921f        amp  not  focus  valid            box-shadow  none border  1px solid  g4        amp  focus invalid                background  transparent url         images icons invalid png   no-repeat 98  center    include box-shadow 0 0 5px  d45252   border-color   b03535          span formHintBubble  position absolute  background  g7  margin-top 50px  include borderRadius 10px   padding 5px 40px 5px 10px  color white   include opacity 0 9    include box-shadow 1px 1px 6px 1px rgba 0 0 0 0 2       amp  after         include triangle 30px   g7  up   content       margin-bottom 27px  left 25px         cross  background black  border 1px solid  g3   include borderRadius 10px   width 15px  height 15px  color  fff  display block  line-height 15px  position absolute  right 5px  top 50   margin-top -7 5px  padding 0  text-align center  font-size 10px  cursor pointer       JAVASCRIPT   Here  we can do some funky stuff to use the default messages and inherit them inside your own  bubble  or error message box   var form         form    var item      form find   invalid   first    var node      item get 0                          var pos       item position                    var message   node validationMessage     Invalid value     var bubble        lt span  gt    html   lt span class  formHintBubble  style  left      pos left     px  top     pos top    px   gt     message     lt div class  cross  gt X lt  div gt  lt  span gt    contents            bubble insertAfter item      DEMO    http   jsfiddle net shannonhochkins wJkVS   Enjoy and I hope I help others with HTML5 form validation as it s awesome  and it needs to get out there   Shannon

User · Answer

I know it is an old topic  but when there is a very complex  especially asynchronous  validation process  there is a simple workaround    lt form id  form1  gt   lt input type  button  onclick  javascript submitIfVeryComplexValidationIsOk      gt   lt input type  submit  id  form1 submit hidden  style  display none    gt   lt  form gt       lt script gt  function submitIfVeryComplexValidationIsOk         var form1   document forms  form1       if   form1 checkValidity                  form1 submit hidden   click           return            if  checkForVeryComplexValidation        Ok              form1 submit         else            alert  form is invalid            lt  script gt

User · Answer

After some research  I ve came up with the following code that should be the answer to your question   At least it worked for me   Use this piece of code first  The   document  ready makes sure the code is executed when the form is loaded into the DOM     document  ready function             theIdOfMyForm   submit function event           if  this checkValidity                          event preventDefault                            Then just call     theIdOfMyForm   submit    in your code   UPDATE  If you actually want to show which field the user had wrong in the form then add the following code after event preventDefault         theIdOfMyForm  input visible required  required     each function         if  this validity valid                  this  focus               break         return false              It will give focus on the first invalid input

User · Answer

You have to submit the form to get the html5 validation to work  There s a way around it to get what you want  Se the code     lt body gt       lt h1 gt Validation Example lt  h1 gt  lt br   gt       lt h2 gt Insert just 1 digit lt h2 gt       lt form id  form  onsubmit  return false  gt           lt label gt Input lt input type  text  pattern   0-9   id  input    gt  lt  label gt            lt input type  submit  class  hide  id  inputButton  gt                lt  form gt   lt  body gt    See an example here   Note  using form submit   didn t work for me  So i created a hidden submit button  that triggers on keyup  Don t ask me why  Maybe someone could clarify it

User · Answer

Try HTMLFormElement reportValidity   where this function will invoke the input validations

User · Answer

The accepted answer to this question appears to be what you re looking for    Short summary  in the event handler for the submit  call event preventDefault

User · Answer

i was using   objectName addEventListener  click   function     event preventDefault        but its show error  event is undefined  so in this case use event parameter like   objectName addEventListener  click   function event    event preventDefault        now its works fine

User · Answer

I think its simpler      submit   click function e   if  e isValid       e preventDefault      your code      this will stop the submit until form is valid

User · Answer

form submit   doesn t work cause the HTML5 validation is performed before the form submition  When you click on a submit button  the HTML5 validation is trigerred and then the form is submited if validation was successfull

User · Answer

As stated in the other answers use event preventDefault   to prevent form submitting   To check the form before I wrote a little jQuery function you may use  note that the element needs an ID     function             fn isValid   function             return document getElementById this 0  id  checkValidity               jQuery      example usage       submitBtn   click  function e            if      registerForm   isValid                    do the request           else               e preventDefault

User · Answer

You can use reportValidity  however it has poor browser support yet  It works on Chrome  Opera and Firefox but not on IE nor Edge or Safari  var myform      quot  my-form quot   0   if   myform checkValidity          if  myform reportValidity            myform reportValidity          else             warn IE users somehow           checkValidity has better support  but does not work on IE lt 10 neither

[javascript] Trigger standard HTML5 validation (form) without using submit button?

Examples related to javascript

Examples related to jquery

Examples related to forms

Examples related to html