Javascript eventListener在单击1时工作。但单击2失败

所以我用

action=“signup.inc.php”

制作了一个注册表单，但我用javascript处理验证。 如果字段为空或密码不匹配，则输入将显示红色边框并替换占位符。 这在第一次单击时就可以完美地工作。但当我再次点击时，他就直接跳转到signup.inc.php

我需要在进入signup.inc.php文件之前完成这些验证

let signupForm=document.getElementById（'signupForm'）；
让firstname=document.getElementById（'firstname'）；
让lastname=document.getElementById（'lastname'）；
让email=document.getElementById（'email'）；
让username=document.getElementById（'username'）；
让password=document.getElementById（'password'）；
让passwordRepeat=document.getElementById（'passwordRepeat'）；
让结果=假；
功能错误（输入、消息）{
让formControl=input.parentElement；
formControl.className='formControl错误'；
让误差=输入；
error.placeholder=消息；
}
函数ShowSuccess（输入）{
让formControl=input.parentElement；
formControl.className='formControl Success'；
}
函数所需字段（inputArr）{
inputArr.forEach（函数（输入）{
if（input.value.trim（）=''）{
淋浴ROR（输入“此字段为必填项”）；
}否则{
显示成功（输入）；
结果=真；
}
});
}
函数匹配密码（输入1、输入2）{
if（input1.value！==input2.value）{
淋浴错误（输入2，“这些密码不匹配”）；
}否则{
结果=真；
}
}
/*事件监听器*/
signupForm.addEventListener（'submit'，函数（e）{
如果（结果！==真）{
必填字段（[firstname，lastname，email，用户名，密码，passwordRepeat]）；
匹配密码（密码、密码重复）；
e、 预防默认值（）；
}否则{
结果=真；
}
});
.signupFormWrap{
边缘底部：15px；
}
.signupFormWrap，
.formControl{
宽度：400px；
显示器：flex；
弯曲方向：立柱；
}
.formControl标签{
字号：1.2rem；
}
.formControl>input[类型=文本]，
输入[类型=电子邮件]，
输入[类型=密码]{
左侧填充：10px；
字号：1rem；
线高：1.8；
}
.按钮{
边缘顶部：15px；
边缘底部：15px；
}
.formControl.error>输入{
边框：1px纯红；
}
.formControl.succes>输入{
边框：1px纯绿色；
}

名字
姓氏
电子邮件
用户名
密码
验证您的密码
注册
更改所有验证功能，如

function matchPasswords(input1, input2) {
    if (input1.value !== input2.value) {
        showError(input2, "These passwords don't match");
        return false;
    } 
    return true;
}

signupForm.addEventListener('submit', function(e){
   
    if(!requiredFields ([firstname, lastname, email, username, password, passwordRepeat]) &&
        !matchPasswords (password, passwordRepeat)){
        e.preventDefault();
    } 
});

您的问题是，如果任何输入有效，
result
设置为true，因此在下次提交时，不会检查输入并提交表单。您可以通过始终测试所有输入、从每个输入检查函数返回错误状态并检查它们是否都返回
true
，来解决此问题：


let signupForm=document.getElementById（'signupForm'）；
让firstname=document.getElementById（'firstname'）；
让lastname=document.getElementById（'lastname'）；
让email=document.getElementById（'email'）；
让username=document.getElementById（'username'）；
让password=document.getElementById（'password'）；
让passwordRepeat=document.getElementById（'passwordRepeat'）；
功能错误（输入、消息）{
让formControl=input.parentElement；
formControl.className='formControl错误'；
让误差=输入；
error.placeholder=消息；
}
函数ShowSuccess（输入）{
让formControl=input.parentElement；
formControl.className='formControl Success'；
}
函数所需字段（inputArr）{
结果=真；
inputArr.forEach（函数（输入）{
if（input.value.trim（）=''）{
淋浴ROR（输入“此字段为必填项”）；
结果=假；
}否则{
显示成功（输入）；
}
});
返回结果；
}
函数匹配密码（输入1、输入2）{
结果=真；
if（input1.value！==input2.value）{
淋浴错误（输入2，“这些密码不匹配”）；
结果=假；
}
返回结果；
}
/*事件监听器*/
signupForm.addEventListener（'submit'，函数（e）{
让结果=真；
result=result&&requiredFields（[firstname，lastname，email，username，passwordRepeat]）；
结果=结果和匹配密码（密码、密码重复）；
如果（！结果）{
e、 预防默认值（）；
}
});
.signupFormWrap{
边缘底部：15px；
}
.signupFormWrap，
.formControl{
宽度：400px；
显示器：flex；
弯曲方向：立柱；
}
.formControl标签{
字号：1.2rem；
}
.formControl>input[类型=文本]，
输入[类型=电子邮件]，
输入[类型=密码]{
左侧填充：10px；
字号：1rem；
线高：1.8；
}
.按钮{
边缘顶部：15px；
边缘底部：15px；
}
.formControl.error>输入{
边框：1px纯红；
}
.formControl.succes>输入{
边框：1px纯绿色；
}

名字
姓氏
电子邮件
用户名
密码
验证您的密码
注册