如何使用 JavaScript 或 jQuery 启用禁用提交按钮？

Question

我在 HTML 中有一个form Data ，如下所示，

刀片文件：

<form method="post" action="someURL" id="register">
<input type="text" name="name" id="name" />
<div class="error">{{ $errors->first('name') }}</div>
<input type="email" name="email" id="email"/>
<div class="error">{{ $errors->first('email') }}</div>
<textarea name="body" id="message"> Enter your message here</textarea>
<div class="error">{{ $errors->first('message') }}</div>
<input type="submit" id="btnSubmit" disabled />
</form>


<script>
const button = document.querySelector("#btnSubmit");
const buttonExpirationDataKey = 'button-disabled-expiration';

let startButtonStateCheck = () => {
  button.dataset.interval = setInterval(updateButtonState, 1000);
}

let updateButtonState = () => {
  let expirationDate = new Date(button.dataset.enabledAt);
  
  if (expirationDate < new Date()) {
    button.disabled = false;
    clearInterval(button.dataset.interval);
  } else {
    button.disabled = true;
  }
}

let buttonDisableExpiration = localStorage.getItem(buttonExpirationDataKey);
if (!buttonDisableExpiration) {
  // no button state in localStorage, enable button
  button.disabled = false;
} else {
  // button state held in localStorage, check every 1s for expiration to enable the button again
  button.dataset.enabledAt = buttonDisableExpiration;
    updateButtonState();
  startButtonStateCheck();
}

button.addEventListener("click", () => {
 var form = document.getElementById("register");
  var fields = ["name", "email", "body"];
   var i, l = fields.length;
    var fieldname;
     for (i = 0; i < l; i++) {
      fieldname = fields[i];
       if (form[fieldname].value === "") {
          button.disabled = false;
          }
          else{
           button.disabled = true;
           let now = new Date();
           let expirationTime = 1000 * 10; 
           let expirationDate = new Date(now.getTime() + expirationTime);
           localStorage.setItem(buttonExpirationDataKey, expirationDate);
            button.dataset.enabledAt = expirationDate;
            startButtonStateCheck();
          }
       }
 });

</script>

在控制器中：：

 $data = request()->validate([
         'name' => 'required',
         'email'   => 'required|email',
         'body' =>  'required',
        
      ]);

我已经验证了控制器中的字段。

单击时的Submit button应检查是否给出了所有输入值，如果缺少任何一个值，则提交按钮应启用，即使在单击时也是如此。 我已经在控制器中进行了验证

在我的代码中，提交按钮每次都被disabled ，即使没有输入值也被单击。 但是，当我们单击提交按钮时，它会显示错误，因为在输入字段附近This field is required 。

我需要在单击时禁用submit button ，当所有输入值都已给出时，然后将按钮启用和禁用存储在本地存储中。

当用户提交表单时，没有输入表单输入，按钮应该是Enabled 。

但是，提交按钮没有按预期工作。 即使没有表单输入，它也会被禁用

我怎么能这样做？ 有人可以帮忙吗？

Answer 1

首先，您必须阻止表单的默认操作，因此您需要在event上使用preventDefault() ，然后在所有验证检查之后您可以手动提交或启用按钮。 但主要的是您需要禁用默认行为才能添加您自己的自定义检查。

这是一个要展示的小提琴： https ://jsfiddle.net/g6wfkj74/7/ 希望这有帮助