如何检查所有表单字段被赋予启用提交按钮?

Question

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

在我的blade文件中有如下的表单:

<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',
]);
}

问题是，即使我添加了name字段点击按钮，提交按钮被禁用

在点击。按钮应该是disabled

脚本:

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>