禁用提交按钮并启用本机表单验证

Question

当尚未填写具有required属性的字段时，浏览器会显示一个不错的工具提示。

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="this.disabled=true;this.value="Submitted...";this.form.submit()">
</form>

奥拉阿米戈

问题是我在用户提交表单时禁用了此提交按钮，因此不会多次提交，并且在提交后（即使必填字段为空）表单仍然提交。 是否有修复程序，以便浏览器在提交之前检查必填字段？

Answer 1

在禁用提交按钮之前，您需要确保实际上填写了必填字段。

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="if (document.getElementsByName('name')[0].value != null) {
                                this.disabled=true;
                                this.value='Submitted...';
                                this.form.submit();
                              }">
</form>

或者，您可以将document.querySelectorAll()用于多个必需项：

<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Full name" required>
<input type="text" name="name" placeholder="Email address" required>
<input type="text" name="name" placeholder="Phone number">
<input type="submit" onclick="for (x in document.querySelectorAll('input[type=text][required]')) {
                                if (document.querySelectorAll('input[type=text][required]').value != null) {
                                  this.disabled=true;
                                  this.value='Submitted...';
                                  this.form.submit();
                                }
                              }">
</form>

禁用提交按钮并启用本机表单验证

问题描述

1 个解决方案

解决方案1
0 2012-07-08 02:40:13

禁用提交按钮并启用本机表单验证

问题描述

1 个解决方案

解决方案1 0 2012-07-08 02:40:13

解决方案1
0 2012-07-08 02:40:13