获取 HTML5 验证以使用 onclick？答案

【问题标题】：Get HTML5 validation to work with onclick?获取 HTML5 验证以使用 onclick？
【发布时间】：2014-07-23 19:32:13
【问题描述】：

我有一个包含姓名、公司、电子邮件和电话号码的表格，使用 required 可以确保表格中的每个输入都填写了一些内容。我想做的是让它下载一个文件到填写表格的访问者的计算机上，并让这个代码处理下载：

HTML：

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

JS：

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

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

【问题讨论】：

在您的下载功能中尝试e.preventDefault();
@StevoPerisic 提交按钮的默认设置是验证表单字段并将它们发送到某个地方。很确定 Chipe 仍然想要那个。

标签： javascript html forms validation

【解决方案1】：

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

使用 jQuery：

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

    // ... do something else ...

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

如果您想在实际提交表单之前执行某些操作，您还可以阻止默认操作之前提交event.preventDefault();。

【讨论】：

我在这个问题中没有看到任何 jQuery 标签
“我没有看到...”你的意思是。我很乐意花时间为这个问题提供建议。我的解决方案非常简单——如果@Chipe 实际上没有使用 jQuery，只需阅读我的想法就可以触发一个可以用普通的旧 javascript 写出的解决方案。除了批评我的回复外，您没有为这篇文章提供任何有用的信息。这是在浪费大家的时间。
我怀疑，该评论获得了投票。我只提到缺少 jquery 标记，因为我认为应该使用 vanilla js 提供答案。在某些情况下，您不能总是依赖 jquery，但我认为这可能是其中一种情况。没什么奇怪的，没必要生气。
刚刚添加了 jquery CDN 和 window.open 这个函数的一部分，这就是我所需要的！谢谢！
form.submit = function() { //I rock... Z28 window.open('the_file.zip');返回; //返回任何你想要的... }

【解决方案2】：

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

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

【讨论】：