仅当所有表单字段都不为空时，如何使按钮转到下一页答案

【问题标题】：How can I make a button go to the next page only if all form fields are not empty仅当所有表单字段都不为空时，如何使按钮转到下一页
【发布时间】：2016-11-27 15:13:02
【问题描述】：

我有一个提交表单的按钮，但我也希望它链接到另一个页面。如果表单中的所有字段都已填写（所有字段都是必需的），我只希望它链接到下一页。我认为这将涉及 JavaScript，这很好，但我想避免使用 jQuery。谢谢。

【问题讨论】：

w3schools.com/js/js_validation.asp

标签： javascript html forms button required

【解决方案1】：

通常的做法是将普通表单提交与POST-Redirect-GET结合（服务器接受表单提交，然后重定向页面）。

使用正常的表单提交，您只需将字段标记为required，如下所示：

<form method="post" action="/what/ever">
  <label>Name: <input required></label>
  <label>Email: <input type="email" required></label>

  <input type="submit" value="Send">
</form>

Example

表单提交成功后，将页面从服务器端重定向到下一页（或到错误页面，以防出错）。

【讨论】：

【解决方案2】：

使用 HTML5 required 字段可以在客户端轻松完成表单验证。

<input type="text" required />

但是，并非所有浏览器都支持 HTML5，对于那些您可以使用基于 JavaScript 的解决方案。这可以以无数种方式实现。例如，通过在提交按钮上添加事件侦听器，验证所有字段是否为非空，否则会阻止提交。

var form = document.forms["form-name"];
var formFields = form.getElementsByTagName("input");

form.addEventListener("submit", function (event) {
    var validationOk = true;
    for (var i = 0; i < formFields.length; i++) {
        if (formFields[i].value == "") {
            validationOk = false;
            // Here you probably also want to give the user some kind 
            // of feedback by adding a class to the field or similar
        }
    }
    if (!validationOk) {
        event.preventDefault();
    }
});

但是，请注意，从安全角度来看，您应该永远不要信任客户端验证，而应该在服务器端进行，只要验证不仅仅是为了改善用户体验.

【讨论】：