CODEWITHSUNDEEP
javascripthtmlformsvalidation
Chipe
Chipe

Reputation: 4801

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 download a file to the computer of the visitors who fill out the form, and have this code handling the download:

HTML:

<input type="submit" id="submitbutton" onclick="download()">

JS:

function download(){
    window.open('the_file.zip');
}

However, adding the onclick is causing the form to bypass validation and it will submit and download with nothing needing to be filled out. What can I do here to make sure the HTML5 validation works?

Upvotes: 2

Views: 2646

Answers (2)

snickle
snickle

Reputation: 311

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).

Upvotes: 0

Damon
Damon

Reputation: 4484

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.

Upvotes: 3

Related Questions