Javascript JS/HTML我的表单提交按钮不是'；当表单不完整时，不显示错误消息

我只学了几个月，试着学习基础知识。我创建了一个表单，我尝试输入javascript，在单击submit按钮时显示一条错误消息，但信息不完整。到目前为止，我只在用户名字段上测试过这个，但是当我单击提交时，我的消息“name is required”没有显示，而是将用户名保留为空

我从youtube视频中看到了这段代码，就我所知，它看起来还不错！我也将js放入了语法验证器中。我最初在div上有id，而不是input标签，所以改变了这个

const name=document.getElementById（'name'））
formZ.addEventListener（'submit'，（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（messages.length>0）{
e、 预防默认值（）
error.innerText=messages.join（“，”）
}
})

提交

您没有得到预期的结果，因为name字段是

必需的

，这意味着如果该字段留空，将不会发生提交

由于您在提交时所做的唯一检查是

name

不为空或不为null，并且当

name

为空时，浏览器会自动阻止用户提交表单，因此您不会看到错误消息

Iv'e添加了一个条件，用于在用户输入字符串

a

时添加错误。尝试输入

a

并提交，您将看到预期结果

另外，在代码中缺少一些变量（

error

和

formZ

），所以我也添加了它们

在我看来，您有两种选择： 1.添加不同的错误案例，不检查空值的案例。 2.不要使用

required

属性

不管怎样，我建议你读一下，这可能会对你有所帮助

const name=document.getElementById（'name'）；
const error=document.getElementById（'errorMessage'）；
const formZ=document.getElementById（'formZ'）；
formZ.addEventListener（'submit'，（e）=>{
让消息=[]；
如果（name.value==''| | name.value==null | | | name.value===='a'）{
messages.push（'需要名称'）；
}
如果（messages.length>0）{
e、 预防默认值（）
error.innerText=messages.join（“，”）
}
})

提交

您没有得到预期的结果，因为name字段是

必需的

，这意味着如果该字段留空，将不会发生提交

由于您在提交时所做的唯一检查是

name

不为空或不为null，并且当

name

为空时，浏览器会自动阻止用户提交表单，因此您不会看到错误消息

Iv'e添加了一个条件，用于在用户输入字符串

a

时添加错误。尝试输入

a

并提交，您将看到预期结果

另外，在代码中缺少一些变量（

error

和

formZ

），所以我也添加了它们

在我看来，您有两种选择： 1.添加不同的错误案例，不检查空值的案例。 2.不要使用

required

属性

不管怎样，我建议你读一下，这可能会对你有所帮助

const name=document.getElementById（'name'）；
const error=document.getElementById（'errorMessage'）；
const formZ=document.getElementById（'formZ'）；
formZ.addEventListener（'submit'，（e）=>{
让消息=[]；
如果（name.value==''| | name.value==null | | | name.value===='a'）{
messages.push（'需要名称'）；
}
如果（messages.length>0）{
e、 预防默认值（）
error.innerText=messages.join（“，”）
}
})

提交

为验证添加类似html5表单验证程序的必需属性。为验证添加类似html5表单验证程序的必需属性。非常感谢。我已取出所需字段。因此，基本上，通过在html中使用“required”，浏览器会停止任何提交，因此不会错误提交以显示错误消息？是的，很抱歉我有这些变量，但忘记了显示它们。@Chaliiser也许您可以保留

必需的
，
并在每次使用
onclick=“someFunction（）”
单击提交按钮时触发一个验证函数，这样，您就可以同时享受这两个方面的好处了。那么，函数在单击时，而不是提交时？有意思，是的，我一定会尝试的。我昨天花了4个小时想弄明白，你不知道我现在有多高兴！再次感谢。太棒了，非常感谢。我已取出所需字段。因此，基本上，通过在html中使用“required”，浏览器会停止任何提交，因此不会错误提交以显示错误消息？是的，很抱歉我有这些变量，但忘记了显示它们。@Chaliiser也许您可以保留
必需的
，
并在每次使用
onclick=“someFunction（）”
单击提交按钮时触发一个验证函数，这样，您就可以同时享受这两个方面的好处了。那么，函数在单击时，而不是提交时？有意思，是的，我一定会尝试的。我昨天花了4个小时想弄明白，你不知道我现在有多高兴！再次感谢。