Manually Triggering Form Validation using jQuery

Question

I have a form with several different fieldsets  I have some jQuery that displays the field sets to the users one at a time  For browsers that support HTML5 validation  I d love to make use of it  However  I need to do it on my terms  I m using JQuery  When a user clicks a JS Link to move to the next fieldset  I need the validation to happen on the current fieldset and block the user from moving forward if there is issues  Ideally  as the user loses focus on an element  validation will occur  Currently have novalidate going and using jQuery  Would prefer to use the native method

User · Answer

In some extent  You CAN trigger HTML5 form validation and show hints to user without submitting the form   Two button  one for validate  one for submit  Set a onclick listener on the validate button to set a global flag say justValidate  to indicate this click is intended to check the validation of the form   And set a onclick listener on the submit button to set the justValidate flag to false   Then in the onsubmit handler of the form  you check the flag justValidate to decide the returning value and invoke the preventDefault   to stop the form to submit  As you know  the HTML5 form validation and the GUI hint to user  is preformed before the onsubmit event  and even if the form is VALID you can stop the form submit by returning false or invoke preventDefault     And  in HTML5 you have a method to check the form s validation  the form checkValidity    then in you can know if the form is validate or not in your code   OK  here is the demo  http   jsbin com buvuku 2 edit

User · Answer

x000D   x000D  var field       field   x000D  field keyup function ev   x000D      if field 0  value length  lt  10    x000D          field 0  setCustomValidity  characters less than 10   x000D           x000D       else if  field 0  value length     10    x000D          field 0  setCustomValidity  characters equal to 10   x000D           x000D       else if  field 0  value length  gt  10  amp  amp  field 0  value length  lt  20    x000D          field 0  setCustomValidity  characters greater than 10 and less than 20   x000D           x000D       else if field 0  validity typeMismatch    x000D       field 0  setCustomValidity  wrong email message   x000D           x000D       else   x000D       field 0  setCustomValidity        no more errors x000D           x000D        x000D      field 0  reportValidity   x000D       x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  email  id  field  gt  x000D   x000D   x000D

User · Answer

You can t trigger the native validation UI  see edit below   but you can easily take advantage of the validation API on arbitrary input elements     input   blur function event        event target checkValidity       bind  invalid   function event        setTimeout function       event target  focus      50        The first event fires checkValidity on every input element as soon as it loses focus  if the element is invalid then the corresponding event will be fired and trapped by the second event handler   This one sets the focus back to the element  but that could be quite annoying  I assume you have a better solution for notifying about the errors   Here s a working example of my code above  EDIT  All modern browsers support the reportValidity   method for native HTML5 validation  per this answer

User · Answer

TL DR  Not caring about old browsers  Use form reportValidity     Need legacy browser support  Read on     It actually is possible to trigger validation manually   I ll use plain JavaScript in my answer to improve reusability  no jQuery is needed     Assume the following HTML form    lt form gt     lt input required gt     lt button type  button  gt Trigger validation lt  button gt   lt  form gt    And let s grab our UI elements in JavaScript   var form   document querySelector  form   var triggerButton   document querySelector  button       Don t need support for legacy browsers like Internet Explorer  This is for you   All modern browsers support the reportValidity   method on form elements   triggerButton onclick   function          form reportValidity       That s it  we re done  Also  here s a simple CodePen using this approach     Approach for older browsers     Below is a detailed explanation how reportValidity   can be emulated in older browsers       However  you don t need to copy amp paste those code blocks into your project yourself     there is a ponyfill polyfill readily available for you    Where reportValidity   is not supported  we need to trick the browser a little bit  So  what will we do    Check validity of the form by calling form checkValidity    This will tell us if the form is valid  but not show the validation UI  If the form is invalid  we create a temporary submit button and trigger a click on it  Since the form is not valid  we know it won t actually submit  however  it will show validation hints to the user  We ll remove the temporary submit button immedtiately  so it will never be visible to the user  If the form is valid  we don t need to interfere at all and let the user proceed      In code   triggerButton onclick   function           Form is invalid    if   form checkValidity             Create the temporary button  click and remove it     var tmpSubmit   document createElement  button       form appendChild tmpSubmit      tmpSubmit click       form removeChild tmpSubmit       else          Form is valid  let the user proceed or do whatever we need to         This code will work in pretty much any common browser  I ve tested it successfully down to IE11    Here s a working CodePen example

User · Answer

I m not sure it s worth it for me to type this all up from scratch since this article published in A List Apart does a pretty good job explaining it  MDN also has a handy guide for HTML5 forms and validation  covering the API and also the related CSS

User · Answer

For input field  lt input id  quot PrimaryPhNumber quot  type  quot text quot  name  quot mobile quot   required                                        pattern  quot   789  d 9   quot  minlenght  quot 10 quot  maxLength  quot 10 quot  placeholder  quot Eg  9444400000 quot                                         class  quot inputBoxCss quot   gt         PrimaryPhNumber   keyup function  e            console log e          let field   this          if Number field val    toString     quot NaN quot                field val                  field focus                field 0  setCustomValidity  Please enter a valid phone number                field 0  reportValidity                  quot  focus quot   css  quot border quot    quot 2px solid red quot

User · Answer

I seem to find the trick  Just remove the form target attribute  then use a submit button to validate the form and show hints  check if form valid via JavaScript  and then post whatever  The following code works for me    lt form gt     lt input name  foo  required gt     lt button id  submit  gt Submit lt  button gt   lt  form gt       lt script gt      submit   click  function e     var isValid   true       form input   map function         isValid  amp   this validity  valid              if  isValid        console log  valid            post something       else     console log  not valid          lt  script gt

User · Answer

Html Code    lt form class  validateDontSubmit  gt        lt button style  dislay none  gt submit lt  button gt   lt  form gt   lt button class  outside  gt  lt  button gt    javascript  using Jquery     lt script type  text javascript  gt     document  on  submit    validateDontSubmit  function  e          prevent the form from doing a submit     e preventDefault        return false        document  ready function       using button outside trigger click         outside   click function                 validateDontSubmit button   trigger  click                 lt  script gt    Hope this will help you

User · Answer

Another way to resolve this problem      input   oninvalid function  event  errorMessage        event target focus

User · Answer

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

Somewhat easy to make add or remove HTML5 validation to fieldsets       form   each function            CLEAR OUT ALL THE HTML5 REQUIRED ATTRS       this  find   required   attr  required   false           ADD THEM BACK TO THE CURRENT FIELDSET        I M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS       this  find  fieldset current  required   attr  required   true          this  submit function             var current         this  find  fieldset current           var next            current  next               MOVE THE CURRENT MARKER           current  removeClass  current              next  addClass  current                ADD THE REQUIRED TAGS TO THE NEXT PART            NO NEED TO REMOVE THE OLD ONES            SINCE THEY SHOULD BE FILLED OUT CORRECTLY           next  find   required   attr  required   true

[html] Manually Triggering Form Validation using jQuery

Examples related to html

Examples related to jquery

Examples related to validation