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>

ola amigo

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

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 个答案: