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

by

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.

More Related Contents:

  1. Stop form refreshing page on submit
  2. Clearing using jQuery
  3. Submitting a form on ‘Enter’ with jQuery?
  4. How to send a JSON object using html form data
  5. How to submit an HTML form without redirection
  6. Prevent form redirect OR refresh on submit?
  7. Drop-down box dependent on the option selected in another drop-down box
  8. How to prevent page from reloading after form submit – JQuery
  9. Property ‘submit’ of object # is not a function
  10. Adding rows dynamically with jQuery
  11. Best JavaScript solution for client-side form validation and interaction? [closed]
  12. Change the content of a div based on selection from dropdown menu
  13. jQuery Change event on an element – any way to retain previous value?
  14. Submit form after calling e.preventDefault()
  15. How do you limit options selected in a html select box?
  16. How can I get all a form’s values that would be submitted without submitting [duplicate]
  17. Trigger standard HTML validation (form) without using submit button? [duplicate]
  18. submit event does not fire if submit initiated programmatically
  19. Get content of span
  20. copying the value of a form’s file input field to another form’s input field
  21. Write tags in HTML and print
  22. How to do a Jquery Callback after form submit?
  23. Animate element to auto height with jQuery
  24. Limit number of lines in textarea and Display line count using jQuery
  25. How to auto-scroll to end of div when data is added? [duplicate]
  26. Value was evaluated just now with console.log on JavaScript object
  27. Javascript Code works in jsfiddle and but not in the Browser [closed]
  28. HTML5 responsive canvas: resizing the browser canvas draw disappear
  29. how to use jQuery ajax calls with node.js
  30. form with no action and where enter does not reload page

Leave a Comment