如何使用 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/ 希望這有幫助