禁用提交按钮并启用本机表单验证
[英]Disable button on submit and enable native form validation
问题描述
Browsers have a nice tooltip that appears when a field with the required attribute has not been filled in. 
当尚未填写具有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>
The problem is I have this submit button disabled when the user submits the form so it wouldn't be submitted multiple times, and after submitting (even if the required field is empty) the form still submits. 问题是我在用户提交表单时禁用了此提交按钮，因此不会多次提交，并且在提交后（即使必填字段为空）表单仍然提交。 Is there a fix so that the browser will check on the required fields before submitting? 是否有修复程序，以便浏览器在提交之前检查必填字段？
1 个解决方案
解决方案1
0 2012-07-08 02:40:13
You need to make sure that the required fields are actually filled in before you disable the submit button. 在禁用提交按钮之前，您需要确保实际上填写了必填字段。
<!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>
Or you could use document.querySelectorAll() for multiple required ones: 或者，您可以将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.