HTML5 validation when the input type is not “submit”

by

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

More Related Contents:

  1. How do I make a field required in HTML?
  2. How do I style the HTML form validation error messages with CSS?
  3. Bootstrap height
  4. How do you disable browser autocomplete on web form field / input tags?
  5. Using the HTML5 “required” attribute for a group of checkboxes?
  6. Is there a way to style part of an input field’s value? [duplicate]
  7. Preventing Firefox from remembering the input value on refresh with a meta tag
  8. How to allow only one radio button to be checked?
  9. Send email from static page hosted on GitHub Pages
  10. How to disable the resize grabber of ? [duplicate]
  11. Best JavaScript solution for client-side form validation and interaction? [closed]
  12. HTML apply a filter
  13. Delay HTML5 :invalid pseudo-class until the first event
  14. Are nested HTML comments possible?
  15. How to show setCustomValidity message/tooltip without submit event
  16. How to align input forms in HTML
  17. What elements can be contained within a tag?
  18. Is there a minlength validation attribute in HTML?
  19. or ? What’s the difference?
  20. How to align texts inside of an input?
  21. How to set custom validation messages for HTML forms?
  22. Trigger standard HTML validation (form) without using submit button? [duplicate]
  23. Is div inside list allowed? [duplicate]
  24. Can you style html form buttons with css?
  25. Styling autocomplete dropdowns in browsers
  26. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  27. Is the copyright meta tag valid in HTML5?
  28. How to get the text from the HTML5 input field error message in Selenium?
  29. Symfony Forms: HTML5 datalist
  30. Can I nest form tags in other form tags?

Leave a Comment