Get HTML5 Validation To Work With Onclick?

I have a form for name, company, email, and phone number, and using required it makes sure that the form has something filled in for each input. What I am trying to do is have it d

Solution 1:

I would listen for the submit rather than the click event.

Using jQuery:

$('form').submit(function(event){
    alert('form was submitted!');
    // window.open('the_file.zip');
    // event.preventDefault();

    // ... do something else ...

    // $(this).submit();
});

Then you could also prevent the default action of submit event.preventDefault(); before if you wanted to do something before you actually submitted the form.

Solution 2:

What you should really do is, instead of an onclick event, set the form action attribute to a server page that validates the form, then, if the form is valid, redirects the user to the_file.zip.

Even by doing something like event.preventDefault(), I'm pretty sure you're also going to prevent the form values from being processed by anything (they'll just sit their in their respective input fields and a new window will open with the file to download).