在纯JavaScript中开发干净的代码后，当表单为空时，我无法触发警报

Question

纯HTML中的小代码，不要忘记为get设置方法:

<form action="#" method="get">
<input id="name" type="text" name="name" placeholder="Nome"><br>
<input id="email" type="text" name="email" placeholder="E-mail"><br>
<textarea id="message" name="name"  rows="8" placeholder="Dê-nos um elogio, uma reclamação ou um elogio"></textarea>
<input type="submit" value="Enviar" id="send"><br>
</form>

我对脏的多个if-else语句进行了重构并编写了干净的代码，简化了代码。在此之后，我无法触发警报。

代码let send = document.getElementById("send");检查代码<input type="submit" value="Enviar" id="send"><br>。

之前，在脏代码中，我有许多document.getElementById("email").value == ""并简化为:

const fields = new Set([
'name',
'email',
'message',
]);

我简化了三个'if-else语句以及这些标识符的if-else语句。首先，它会检查字段是否为空，去验证长度，1表示只有一个空字段，> 1表示更多的空字段。否则，他们将检查字段是否已满并提交。

function alert() 
{
let required = fields.value == "";
if (required.length == 1)
{
alert("The field is required!");
required = []
}
else if (required.length > 1)
{    alert("The fields are required!");
required = []
}
else
{
document.getElementById("send").submit();
alert("Thank you! The message was sent successfully")
}
}

最后，代码send.addEventListener("click", alert)表示发送时点击功能，addEventListener触发报警。

完整的JavaScript代码:

let send = document.getElementById("send");
const fields = new Set([
'name',
'email',
'message',
]);
function alert() 
{
let required = fields.value == "";
if (required.length == 1)
{
alert("The field is required!");
required = []
}
else if (required.length > 1)
{    alert("The fields are required!");
required = []
}
else
{
document.getElementById("send").submit();
alert("Agradecemos, mensagem enviada com sucesso!")
}
}
send.addEventListener("click", alert)

Answer 1

我建议您在表单上为invalid创建一个事件侦听器。当其中一个必填字段为空/无效时(请参阅所有字段上的required属性)，将调用该函数。我做了一个自定义警报，显示:

var alert = document.getElementById('alert');
alert.addEventListener('click', e => {
if (e.target.nodeName == 'BUTTON')
alert.classList.remove('show');
});
document.forms.form01.addEventListener('submit', e => {
console.log('The form will submit');
});
document.forms.form01.addEventListener('invalid', e => {
e.preventDefault();
alert.classList.add('show');
}, true);

#alert {
display: none;
}
#alert.show {
display: block;
}

<form name="form01" action="#" method="get">
<input id="name" type="text" name="name" placeholder="Nome" required><br>
<input id="email" type="text" name="email" placeholder="E-mail" required><br>
<textarea id="message" name="message" rows="8" placeholder="Dê-nos um elogio, uma reclamação ou um elogio" required></textarea>
<input type="submit" value="Enviar" id="send"><br>
</form>
<div id="alert">The fields are required! <button>OK</button></div>

这将推翻浏览器中的默认行为。在任何情况下，我认为required属性是正确的方法。

Answer 2

您可能喜欢这样处理您的函数:

function showAlerts(){
var allInputs = document.querySelectorAll('#name, #email, #message');
if(null != allInputs){
for(var i in allInputs){
if(!isNaN(i)){
// here you can check for values, emptiness etc
if(allInputs[i].value.trim() === ''){
// this field is empty
alert('This field is required!');
}
...
}
}
}
}