I need to `enable` the submit button, only when all the Input values were given.

I have a form like the below in my blade file.

```
<form method="POST" id="contactForm">
 <div class="row">
   <div class="col-6">
     <input type="text" name="name" id="name" value=""/>
     <div class="error">Error Message</div>
   </div>
   <div class="col-6">
     <input type="text" name="email" id="email" value=""/>
     <div class="error">Error Message</div>
   </div>
   <div class="col-12">
     <textarea name="body" id="message" rows="5"> Enter your message</textarea>
        <div class="error">Error message</div>
   </div>
   <div class="col-12">
      <input type="submit" value="Submit" class="primary" id="buttonSubmit" disabled/>
   </div>
</form>

```

Added the **required attribute** inside the controller.

**In controller:**

```
public  function store()
{
$data = request()->validate([
         'name' => 'required',
         'email'   => 'required|email',
         'body' =>  'required',
        ]);
}

```

The problem is, even if I add the **name field** and click the **button** , the submit button is **disabled** on click.

The button should be **disabled**, only when all the input fields were given.

**Script:**

```
 const button = document.querySelector("#buttonSubmit");
 const buttonExpirationDataKey = 'button-disabled-expiration';
 button.addEventListener("click", () => {
   var form = document.getElementById("contactForm");
             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 = true;
                  let now = new Date();
                  let expirationTime = 1000 * 5; // 5 secs to disable the submit button
                  let expirationDate = new Date(now.getTime() + expirationTime);
                  localStorage.setItem(buttonExpirationDataKey, expirationDate);
                  button.dataset.enabledAt = expirationDate;
                }
                 else {
                   button.disabled = false;
                }
               return false;
              }
            });

```

The for loop iterates over each input element, if the **particular input element** have a value and then If we click the **submit**. The button is **disabled** and stored in the local storage.

How to check all the **form input** and the **textarea** has values and then after clicking the **submit button**, the button should be **disabled** for 5 secs.

<https://jsfiddle.net/1vgzj8oc/>

How could I do this? Could anyone please help?