获得HTML5验证以与onclick一起使用？

Question

我有一个用于姓名，公司，电子邮件和电话号码的表格，使用必填项可确保该表格中的每个输入内容均已填写。 我想做的是让它将文件下载到填写表单的访问者的计算机上，并用以下代码处理下载：

HTML：

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

JS：

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

但是，添加onclick会导致表单绕过验证，它将提交并下载，无需填写任何内容。 我在这里可以做什么以确保HTML5验证有效？

Answer 1

我会听提交而不是点击事件。

使用jQuery：

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

    // ... do something else ...

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

然后，您还可以阻止event.preventDefault();的默认操作event.preventDefault(); 如果您想在实际提交表格之前先做点事。

Answer 2

您真正应该做的是，将form action属性设置为验证表单的服务器页面，而不是onclick事件，然后，如果该表单有效，则将用户重定向到the_file.zip 。

即使通过执行诸如event.preventDefault() ，我也很确定您还将防止表单值被任何东西处理（它们只会将其放在各自的输入字段中，并且会打开一个新窗口，下载文件）。