在未填写正确表单时禁用提交 js答案

【问题标题】：disable submit while correct forms not filled js在未填写正确表单时禁用提交 js
【发布时间】：2021-01-07 12:23:54
【问题描述】：

我在更正未填写的表单时禁用提交有问题。我的代码可以工作，但需要做一些更改并知道如何解决它。我的js

$(document).ready(function (){
    validate();
    $('#InputEventDate, #InputEventText').change(validate);
});

function validate(){
    if ($('#InputEventDate').val().length   >   0   &&
        $('#InputEventText').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

所以我有表单，以什么形式事件时间输入和事件文本是必要的。所以我禁用了按钮并检查了 js 的长度。问题是他们没有实时检查，需要点击一些东西然后我的按钮不会被禁用。我尝试像这样更改js。

$('#InputEventText').val($(this).val().length)   >   0

但后来我选择了数据，在我的事件表单中写了 idk 为什么 10 并且什么也不做，提交不更改为不禁用。知道如何解决吗？

【问题讨论】：

你能在 SO Snippet 中提供最小的例子吗？
您需要删除 disabled 属性，并且该属性将再次可供点击
我需要在用户编写文本时点击。
你的change 事件被触发了吗？在里面打断点或者打印
另外，我们需要查看您的 HTML

标签： javascript

【解决方案1】：

验证过程完成后，您可以使用 javascript 发送数据

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // response -> this.responseText;
  }
};
xhttp.open("POST", "URL", true);
xhttp.send(Data);

或

在表单标签中使用 onsubmit 事件。在该事件中进行验证。

<form onsubmit="return validate()">

【讨论】：

不要混合使用 HTML 和 JS
我知道这不是一个好习惯。谢谢@ChayimFriedman。我更新了我的答案。

【解决方案2】：

如果您使用的是原版 javascript，则需要做一些事情。

为每个输入设置状态。这取决于您有多少输入。例如isNameValid = false;
创建一个更改事件侦听器并将其附加到您要跟踪的所有输入。在事件侦听器中，您需要验证输入，将输入标记为有效并运行一个函数来检查所有输入状态是否为真。如果所有状态都为真，则启用该按钮，否则禁用它。

【讨论】：