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

Question

I have a form Data in the HTML like the below,

Blade file :

<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>

In controller: :

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

I have validated the fields in the controller.

The Submit button on click should check whether all the Input Values were given, If either one of the values is missing, the Submit button should be Enabled , even on click. I have given the validation in the controller

In my code, the submit button is disabled every time, when it is clicked even without the input values. But, it shows the error as This field is required near the input fields, when we click the submit button.

I need the submit button to be Disabled on click , when all the input values were given and then storing the button Enabled and Disabled in the Local storage.

When a user submits the form, without entering the form input, the button should be Enabled .

But, the submit button is not working as expected . It gets disabled , even without the form inputs

How could I do this? Could anyone please help?

Answer 1

Here first you will have to prevent the default action of the form so you need to use preventDefault() on event and than after all validations check you can manually submit or enable the button. But the main thing is that you need to disable the default behaviour to add your own custom checks.

Here is a fiddle to show : https://jsfiddle.net/g6wfkj74/7/ Hope this helped