为什么禁用表单提交会影响最小和最大属性？

Question

我正在使用 min 和 max 属性对 HTML 表单进行一些验证。如果单击提交按钮一次，我还想阻止表单提交，以防止在重新加载页面之前提交多个表单。

这是禁用按钮的内联代码：

<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;this.form.submit();">

这是数字输入域代码：

<input type="number" name="endNo" placeholder="END" min="5" max="20">

如果我为提交按钮包含内联 JS，则最小值和最大值验证不起作用。删除后，它似乎工作得很好。为什么会发生这种情况？如何同时满足这两个条件，在单击后禁用按钮，同时仍然验证数字输入字段的最小值和最大值？

我正在使用谷歌浏览器。

Answer 1

表单元素上的submit 方法实现了它的承诺，它只是提交表单，不进行验证。您可以使用checkValidity 方法手动进行验证。

<input type="submit" name="name" value="REGISTER" 
    onclick="if(this.form.checkValidity()){this.disabled=true;this.form.submit();}">

Answer 2

我正在使用 min 和 max 属性对 HTML 表单进行一些验证。如果单击提交按钮一次，我还想阻止表单提交，以防止在重新加载页面之前提交多个表单。

正如您所说，您想阻止表单提交，因此您必须将项目符号指向<form> 标记。当你需要处理submit事件时，总是攻击<form>，所以我们添加一个onsubmit属性：

<form method="post" action="my-script.php" onsubmit="return something();">

现在让我们添加一个小功能，告诉我们的<form> 做什么。在这种情况下，让我们显示输入的结果：

<script type="text/javascript">
function something() {
    var v = document.getElementById( "endNo" ).value;
    alert( "The value is " + v );
    return false;
}
</script>

我在输入中添加了一些 id 属性以由 javascript 处理：

<input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20">

提交按钮仅在onclick 属性中显示disabled 事件，因为return false 已在<form> 标记上执行：

<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;">

整个标签如下所示：

<script type="text/javascript">
function something() {
    var v = document.getElementById( "endNo" ).value;
    alert( "The value is " + v );
    return false;
}
</script>

<form method="post" action="" onsubmit="return something();">
<input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20">
<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;">
</form>

查看实际效果： https://jsfiddle.net/darioferrer/mfs3adqm/

查看一些类似的案例：

• On submit form, return false not working
• onSubmit after checking return false and still submit
• Why does my HTML form still submit when I return false from onsubmit?

Answer 3

似乎 this.form.submit() 正在绕过最小/最大检查，即使您在控制台中执行此操作（通过 id 获取表单然后调用提交）。我认为这与您的设置无关。

试试这个方法

<form>
  <input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20" required> <!-- I assume it is required? -->
  <input type="button" id="fakeSubmit" name="name" value="REGISTER"     onclick="submitIfValid()"> <!-- fake submit -->
  <input type="submit" id="submitButton" style="visibility:hidden"> <!-- Actual submit -->
</form>

<script>
 function submitIfValid()
 {
    if(document.getElementById('endNo').value < document.getElementById('endNo').getAttribute("min") || document.getElementById('endNo').value > document.getElementById('endNo').getAttribute("max")) // Get the attributes dynamically and check
     {
       document.getElementById('submitButton').click(); // Simulate a standard click to show error
     }  
     else
     {
       document.getElementById('fakeSubmit').disabled = true; // Disabled it, we got our value
       document.getElementById('submitButton').click(); // Actual submission
     }

 }
</script>

确保添加服务器端检查。永远不要相信 jQuery 或 javascript

注意：如果留空，则为

注意 2：如果您对 jQuery 持开放态度，表单验证会变得容易得多 ($(formid).valid())，这比我的方法更容易，并且在需要检查多个字段的情况下。你可以阅读它here。

Answer 4

您可以将输入类型从 submit 更改为 button 以阻止它立即提交。

 <input type="button" name="name" value="REGISTER" onclick="this.disabled='true';this.form.submit();" />