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

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

javascript html validation

Javascript 禁用提交按钮并启用本机表单验证,javascript,html,validation,Javascript,Html,Validation,浏览器有一个很好的工具提示，当带有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=t

浏览器有一个很好的工具提示，当带有

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>

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

在禁用“提交”按钮之前，您需要确保已实际填写必填字段

<!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>

如果我有10个输入字段，这将是一个头疼的问题。

<!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>