在正确的输入上使用js重新启用提交按钮[重复]答案

【问题标题】：Re-enable submit button using js on correct inputs [duplicate]在正确的输入上使用js重新启用提交按钮[重复]
【发布时间】：2019-06-11 22:06:19
【问题描述】：

首先，我浏览了提供的所有可能的其他解决方案，并在谷歌上搜索了这个问题，但这些解决方案要么使用 jquery 等，要么使用其他我无法在这里解决我的问题的技术，所以请不要将其标记为重复.

现在，我面临的问题是我有一个提交按钮，如果用户输入无效，该按钮会通过 javascript 禁用。我正在使用 disabled=true 和 css 属性 "pointer-events" 来禁用所有悬停属性，因为我已经为按钮着色了动画。

检查按钮是否应该被禁用的javascript函数（shouldISubmit() js函数）是通过事件“onMouseOver”。

现在的问题是，如果按钮被禁用，它会禁用 onMouseOver 操作，因此它不会再次调用 shouldISubmit() 函数，因此会被永久禁用。 p>

有没有其他方法可以禁用或使用任何其他动作事件来调用函数等，以便我可以解决这个问题。

这是禁用或启用按钮的函数shouldISubmit()。

function shouldISubmit(){
            if(FNF){
                document.getElementById("regButton").disabled=false;
                document.getElementById("regButton").style.pointerEvents='auto';
            }
            else{
                document.getElementById("regButton").disabled=true;
                document.getElementById("regButton").style.pointerEvents='none';
            }
        }

这是我的按钮。

<div class="button container">
    <br/>
    <button class="buttons" name = "register" onMouseOver=shouldISubmit(); id="regButton">
        Register
    </button>
</div>

【问题讨论】：

不是禁用按钮，而是在单击按钮时运行一个 JS 函数来验证数据，并决定是否继续执行按钮的默认操作。这是一种非常标准的方式。此外，如果您尽可能在字段上使用 HTML5 验证属性，那么您将在用户键入时对表单进行即时验证。您还可以在值更改或字段失去焦点的输入上使用事件来触发即时验证，这将通过在进行时而不是在结束时进行验证来改善用户体验。
@ADyson 你能举一些决定代码的例子吗？就像它是一个注册页面，如果用户输入无效，它不应该允许用户继续。因此，除了禁用按钮之外，我没有看到任何其他内容。
另外，是的，我已经进行了即时验证
“你能举一些决定代码的例子吗”......那么你现在如何决定？我在你的 shouldISubmit 函数中看到你有 if(FNF){ 但我不知道 FNF 来自哪里。我想这是一个表示验证是否通过的值？如果是这样，那么您只需要运行相同的例程来设置该值，然后在此基础上继续按钮应该执行的任何操作，或者显示错误
@RamshaKhalid 它可能使用 asp.net，但答案不依赖于该框架。 “ 禁用的元素不会触发事件，例如，用户不能悬停或单击它们来触发弹出框（或工具提示）。但是，您可以用 DIV 包装禁用的元素并监听在该元素上触发的事件。”与asp.net无关，它可以解决您的问题。

标签： javascript html css button

【解决方案1】：

我没有从按钮本身调用*shouldISubmit()*，而是尝试从验证函数调用它并且它有效。谢谢大家给我关于如何解决这个问题的想法。我将这个答案发布给未来可能会遇到同样问题的观众，因为我没有找到任何其他简单答案来解决这个问题。

【讨论】：