Javascript onsubmit="；函数（）”；在形式上不起作用

我正在进行表单验证，当我在表单中使用onsbmit调用函数validtae（）时，它不起作用。当我点击“提交”按钮时，假设发生的验证不起作用，我不知道为什么它不起作用，我试图在提交时添加返回，但仍然不起作用。我尝试在输入标记中使用onfocus调用函数，它可以工作，但我想在单击按钮时工作

//获取输入
const namee=document.forms['myForm']['name']；
const email=document.forms['myForm']['email']；
const password=document.forms['myForm']['password']；
//去埃罗要去的地方
const namererror=document.querySelector（“#namererror”）；
const emailerror=document.querySelector（“#emailerror”）；
const passworderror=document.querySelector（“#passworderror”）；
//验证函数
函数验证（）{
如果（namee.value==“”）{
namee.style.border=“2px纯红”；
nameerror.textContent=“名称不能为空”；
name.focus（）；
返回false；
}
如果（email.value==“”）{
email.style.border=“2px纯红色”；
emailerror.textContent=“电子邮件不能为空”；
email.focus（）；
返回false；
}
如果（password.value==“”）{
password.style.border=“2px实心红色”；
passworderror.textContent=“密码不能为空”；
password.focus（）；
返回false；
}
}

注册

将“提交”按钮更改为“输入”，它将起作用。

检查此项

    <input type="text" id="name" name="name" placeholder="Name" required>
        <div id="nameerror"></div>
         <input type="email" id="email" name="email" placeholder="Email" required>
        <div id="emailerror"></div>
        <input type="password" id="password" name="password" placeholder="Create a password" 
         required>
            <button onsubmit="validate()" id="submit" type="submit">Sign Up</button>

注册

如果任何验证检查失败，则应使用

event.preventDefault（）

功能验证（事件）{
设无效=0
如果（namee.value==“”）{
namee.style.border=“2px纯红”；
nameerror.textContent=“名称不能为空”；
name.focus（）；
无效的++；
}
如果（email.value==“”）{
email.style.border=“2px纯红色”；
emailerror.textContent=“电子邮件不能为空”；
email.focus（）；
无效的++；
}
如果（password.value==“”）{
password.style.border=“2px实心红色”；
passworderror.textContent=“密码不能为空”；
password.focus（）；
无效的++；
}
如果（无效>0）{
event.preventDefault（）
返回错误
}
}

我想您可能想知道为什么没有显示错误消息。这可能是因为浏览器自己对

required

属性的验证在调用

onsubmit

之前生效。也就是说，

validate

目前甚至没有被调用，您可以通过添加

console.log

调用来轻松验证

如果这不是您想要的，则删除

必需的属性


//获取输入
const namee=document.forms['myForm']['name']；
const email=document.forms['myForm']['email']；
const password=document.forms['myForm']['password']；
//去埃罗要去的地方
const namererror=document.querySelector（“#namererror”）；
const emailerror=document.querySelector（“#emailerror”）；
const passworderror=document.querySelector（“#passworderror”）；
//验证函数
函数验证（）{
如果（namee.value==“”）{
namee.style.border=“2px纯红”；
nameerror.textContent=“名称不能为空”；
name.focus（）；
返回false；
}
如果（email.value==“”）{
email.style.border=“2px纯红色”；
emailerror.textContent=“电子邮件不能为空”；
email.focus（）；
返回false；
}
如果（password.value==“”）{
password.style.border=“2px实心红色”；
passworderror.textContent=“密码不能为空”；
password.focus（）；
返回false；
}
}

注册
我的直觉是，在调用
onsubmit
之前，浏览器自己对
required
属性进行验证。如果这不是您想要的，那么删除
required
attribute.IMHO，您应该完全重新考虑您的验证JS。另外，在HTML代码中没有密码错误
div
。只需将
noValidate
添加到表单中，如下所示：
您正在调用HTML中的函数，而不是返回其中的函数，您已经在上面的JavaScript代码中返回了您的函数。
按钮上未触发
提交
事件。然后使用输入标记而不是按钮标记使用按钮有什么问题？
    <input type="text" id="name" name="name" placeholder="Name" required>
        <div id="nameerror"></div>
         <input type="email" id="email" name="email" placeholder="Email" required>
        <div id="emailerror"></div>
        <input type="password" id="password" name="password" placeholder="Create a password" 
         required>
            <button onsubmit="validate()" id="submit" type="submit">Sign Up</button>