HTML5 validation when the input type is not submit

Question

I m using HTML5 for validating fields  I m submitting the form using JavaScript on a button click  But the HTML5 validation doesn t work  It works only when then input type is submit  Can we do anything other than using JavaScript validation or changing the type to submit   This is the HTML code    lt input type  text  id  example  name  example  value    required gt   lt button type  button   onclick  submitform    id  save  gt Save lt  button gt    I m submitting the form in the function submitform

User · Answer

2019 update  Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement reportValidity   which not only checks validity like checkValidity   but also reports validation errors to the user      The HTMLFormElement reportValidity   method returns true if the element s child controls satisfy their validation constraints  When false is returned  cancelable invalid events are fired for each invalid child and validation problems are reported to the user    Updated solution snippet   function submitform       var f   document getElementsByTagName  form   0     if f reportValidity          f submit

User · Answer

I may be late  but the way I did it was to create a hidden submit input  and calling it s click handler upon submit  Something like  using jquery for simplicity     lt input type  text  id  example  name  example  value    required gt   lt button type  button   onclick  submitform    id  save  gt Save lt  button gt   lt input id  submit handle  type  submit  style  display  none  gt    lt script gt  function submitform             submit handle   click       lt  script gt

User · Answer

The HTML5 form validation process is limited to situations where the form is being submitted via a submit button  The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit   method  Apparently  the idea is that if you submit a form via JavaScript  you are supposed to do validation   However  you can request  static  form validation against the constraints defined by HTML5 attributes  using the checkValidity   method  If you would like to display the same error messages as the browser would do in HTML5 form validation  I   m afraid you would need to check all the constrained fields  since the validityMessage property is a property of fields  controls   not the form  In the case of a single constrained field  as in the case presented  this is trivial of course   function submitform       var f   document getElementsByTagName  form   0     if f checkValidity          f submit        else       alert document getElementById  example   validationMessage

User · Answer

HTML5 Validation Work Only When button type will be submit  change --   lt button type  button   onclick  submitform    id  save  gt Save lt  button gt    To --   lt button type  submit   onclick  submitform    id  save  gt Save lt  button gt

User · Answer

You should use form tag enclosing your inputs  And input type submit  This works    lt form id  testform  gt   lt input type  text  id  example  name  example   required gt   lt button type  submit   onclick  submitform    id  save  gt Save lt  button gt   lt  form gt    Since HTML5 Validation works only with submit button you have to keep it there  You can avoid the form submission though when valid  by preventing the default action by writing event handler for form   document getElementById  testform   onsubmit  function e        e preventDefault        This will give your validation when invalid and will not submit form when valid

User · Answer

Either you can change the button type to submit   lt button type  submit   onclick  submitform    id  save  gt Save lt  button gt    Or you can hide the submit button  keep another button with type  button  and have click event for that button   lt form gt       lt button style  display  none   type  submit   gt Hidden button lt  button gt       lt button type  button  onclick  submitForm    gt Submit lt  button gt   lt  form gt

User · Answer

Try with  lt button type  submit  gt  you can perform the functionality of submitform   by doing   lt form         onsubmit  submitform    gt

User · Answer

Try this out    lt script type  text javascript  gt      function test               alert  hello world       write your logic here like ajax        lt  script gt    lt form action  javascript test      gt      firstName    lt input type  text  name  firstName  id  firstName  required  gt  lt br  gt      lastName    lt input type  text  name  lastName  id  lastName  required  gt  lt br  gt      email    lt input type  email  name  email  id  email   gt  lt br  gt       lt input type  submit  value  Get It   name  submit  id  submit   gt   lt  form gt

User · Answer

I wanted to add a new way of doing this that I just recently ran into  Even though form validation doesn t run when you submit the form using the submit   method  there s nothing stopping you from clicking a submit button programmatically  Even if it s hidden    Having a form    lt form gt       lt input type  text  name  title  required   gt       lt button style  display  none   type  submit  id  submit-button  gt Not Shown lt  button gt       lt button type  button  onclick  doFancyStuff    gt Submit lt  button gt   lt  form gt    This will trigger form validation   function doFancyStuff             submit-button   click        Or without jQuery  function doFancyStuff         document getElementById  submit-button   click        In my case  I do a bunch of validation and calculations when the fake submit button is pressed  if my manual validation fails  then I know I can programmatically click the hidden submit button and display form validation   Here s a VERY simple jsfiddle showing the concept   https   jsfiddle net 45vxjz87 1

[html] HTML5 validation when the input type is not "submit"

Examples related to html

Examples related to forms

Examples related to validation

Examples related to html5-validation