如何检查为启用提交按钮而提供的所有表单字段？

Question

我需要enable提交按钮，只有当所有输入值都给出时。

我的刀片文件中有如下表格。

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

在控制器内添加了所需的属性。

在控制器中：

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

问题是，即使我添加名称字段并单击按钮，单击时提交按钮也会被禁用。

仅当给出所有输入字段时，才应禁用该按钮。

脚本：

 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;
              }
            });

for 循环遍历每个输入元素，如果特定的输入元素有一个值，然后如果我们点击提交。 该按钮被禁用并存储在本地存储中。

如何检查所有表单输入和文本区域是否有值，然后单击提交按钮后，该按钮应禁用5 秒。

https://jsfiddle.net/1vgzj8oc/

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

Answer 1

您可以简单地将所需的属性添加到 HTML

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

但是如果你选择用js来做，你可以这样做……

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

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

Answer 2

您可以添加必需的属性。 添加了参考链接 [https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required]

<form method="POST" id="contactForm">
 <div class="row">
   <div class="col-6">
     <input type="text" name="name" id="name" value="" required/>
     <div class="error">Error Message</div>
   </div>
   <div class="col-6">
     <input type="text" name="email" id="email" value="" required/>
     <div class="error">Error Message</div>
   </div>
   <div class="col-12">
     <textarea name="body" id="message" rows="5" required> 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>