How to check all the form fields were given to enable the submit button?-CodePudding

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 >
   <div >
     <input type="text" name="name" id="name" value=""/>
     <div >Error Message</div>
   </div>
   <div >
     <input type="text" name="email" id="email" value=""/>
     <div >Error Message</div>
   </div>
   <div >
     <textarea name="body" id="message" rows="5"> Enter your message</textarea>
        <div >Error message</div>
   </div>
   <div >
      <input type="submit" value="Submit"  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?

CodePudding user response：

You can simply add the required attributes to the HTML

<input type="text" name="name" id="name" value="" required/>

But if you choose to do it with jS, you can do it this way...

<input type="text" name="name" id="name" value="" />
<input type="submit" value="Submit"  id="buttonSubmit" disabled/>

const requiredInputs = document.querySelectorAll(".requiredInput");
requiredInputs.forEach(function(input) {
  // Logic
});

CodePudding user response：

You can add required attribute. added link for reference [https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required]

<form method="POST" id="contactForm">
 <div >
   <div >
     <input type="text" name="name" id="name" value="" required/>
     <div >Error Message</div>
   </div>
   <div >
     <input type="text" name="email" id="email" value="" required/>
     <div >Error Message</div>
   </div>
   <div >
     <textarea name="body" id="message" rows="5" required> Enter your message</textarea>
        <div >Error message</div>
   </div>
   <div >
      <input type="submit" value="Submit"  id="buttonSubmit" disabled/>
   </div>
</form>