javascript - 为什么禁用表单提交会影响 min 和 max 属性?

标签 javascript html google-chrome

我正在使用 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,最小和最大验证将不起作用。删除后,它似乎工作得很好。为什么会发生这种情况,我如何才能同时满足这两个条件,在单击后禁用按钮,同时仍然验证数字输入字段的最小值和最大值?

我正在使用谷歌浏览器。

最佳答案

表单元素上的 submit 方法做了它所 promise 的,它只是提交表单,不做验证。您可以使用 checkValidity 方法手动进行验证。

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

关于javascript - 为什么禁用表单提交会影响 min 和 max 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40077196/

相关文章:

php - 如何通过cURL 获取带有POST 方法的表单响应?

html - 如何在表列之间插入空格?

google-chrome - Chrome 32 更新中缺少向上/向下滚动条箭头按钮

javascript - 使用计时器打开和关闭 Chrome 中的选项卡

javascript - 在不安装的情况下使用 AjaxMin

具有非 JS REST API 的 Javascript 服务器渲染库

html - 将鼠标悬停在图像上时如何停止元素移动位置

javascript - CSS - 图像缩放/避免拉伸(stretch)和挤压

javascript - HTML 元素仅在输入提示后显示

javascript - 自定义 chrome 扩展中的 Hook 窗口属性