Javascript js中的禁用和启用按钮

我想制作一个带有输入和“提交”按钮的表单。想法是只要输入为空或输入值不正确（电子邮件验证），就禁用按钮。 我有我的js代码，但问题是，按钮从beggining开始被禁用，但当我在第一个输入中写入某些内容时，它开始不被禁用，即使其余的输入没有正确的值

我的职能：

  document.getElementById("my-button").disabled = true
  function inputValidator() {
            var $element = $(this);
         
            // for all input fields
            if ($element.val()) {
                $element.closest('.my-form__item').removeClass('error');
                document.getElementById("my-button").disabled = false;
            } else {
                $element.closest('.my-form__item').addClass('error');
                document.getElementById("my-button").disabled = true;
            }
            // for email field
            if ($element.attr('id') === 'email' && $element.val()) {
                if (!reg.test($element.val())) {
                    $element.closest('.my-form__item').addClass('error');
                    document.getElementById("my-button").disabled = true;
                } else {
                    $element.closest('.my-form__item').removeClass('error');
                    document.getElementById("my-button").disabled = false;
                }
            }

---

有人知道如何解决吗？

迭代表单中的每个元素，检查一个元素的值长度是否为零。注意：在此实现中，“提交”按钮也需要一个值。一种更自然的方法是简单地将所需的标记添加到每个输入中，这也提供了良好的用户体验

JS方法

函数validateForm（）{
让输入=document.forms[“example”].元素；
让status=true；
[…输入].forEach（（输入）=>{
如果（input.value.length==0）状态=false；
});
document.getElementById（'submit'）。disabled=！status；
}

名字



姓氏



电子邮件



提交

该按钮将保持禁用状态。将事件侦听器添加到输入字段，并在回调函数中进行验证。然后在适当时禁用/启用按钮