仅当所有表单字段都不为空时,如何才能使按钮转到下一页
How can I make a button go to the next page only if all form fields are not empty
我有一个提交表单的按钮,但我也希望它 link 到另一个页面。如果填写了表单中的所有字段(所有字段都是必需的),我只希望它 link 到下一页。我认为这将涉及 JavaScript,这很好,但我想避免 jQuery。谢谢。
通常的做法是将正常的表单提交与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>
表单提交成功后,将页面从服务器端重定向到下一页(或错误页面,以防出错)。
可以在客户端使用 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();
}
});
但是,请注意,从安全角度来看,您应该永远不要信任客户端验证,而是应该在服务器端进行验证,只要验证不只是为了目的改善用户体验。
我有一个提交表单的按钮,但我也希望它 link 到另一个页面。如果填写了表单中的所有字段(所有字段都是必需的),我只希望它 link 到下一页。我认为这将涉及 JavaScript,这很好,但我想避免 jQuery。谢谢。
通常的做法是将正常的表单提交与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>
表单提交成功后,将页面从服务器端重定向到下一页(或错误页面,以防出错)。
可以在客户端使用 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();
}
});
但是,请注意,从安全角度来看,您应该永远不要信任客户端验证,而是应该在服务器端进行验证,只要验证不只是为了目的改善用户体验。