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

提交按钮仅显示disabled属性中的onclick事件，因为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/

检查一些类似的案例：

Answer 3

看起来this.form.submit（）绕过最小/最大检查，即使你在控制台中执行它（通过id获取表单然后调用submit）。我不认为这与您的设置有关。

尝试这种方法

<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

注意：如果留空，则为＆lt;比分钟

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

Answer 4

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

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

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

4 个答案: