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();的默认操作。

Answer 2

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

即使通过event.preventDefault()之类的操作，我也很确定你也会阻止表单值被任何东西处理（他们只会将它们放在各自的输入字段和新窗口中将打开文件下载）。

获取HTML5验证以使用onclick？

2 个答案: