验证表单错误检查按钮不起作用

Question

我正在制作验证表格。

当我写完所有的代码后，复选框显示出来，但当我完成代码时，复选按钮不起作用。

请检查我的代码并帮助我运行它。

如果我不添加验证，它会运行;当我添加验证时，复选按钮消失了

const form = document.getElementById('form');
const Username = document.getElementById('Username');
const Email = document.getElementById('Email');
const Mobilenummber = document.getElementById('Mobile nummber');
const password = document.getElementById('password');
const Confirmpassword = document.getElementById('Confirm password');
form.addEventListener('submit', (event) => {
event.preventDefault();
validate();
})
const isEmail = (Emailval) => {
var atsymbol = Emailval.indexof('@');
if (atsymbol < 1) return false;
var dot = Emailval.lastindexof('.');
if (dot <= atsymbol + 2) return false;
if (dot === Emailval.length - 1) return false;
return true;
}

const validate = () => {
const Usernameval = Username.value.trim();
const Emailval = Email.value.trim();
const Mobilenummberval = Mobilenummber.value.trim();
const passwordval = password.value.trim();
const Confirmpasswordval = Confirmpassword.value.trim();
if (Usernameval === "") {
setErrorMsg(Username, 'username cannot be blank');
} else if (Usernameval.length <= 2) {
setErrorMsg(Username, 'username must have 3 cheacter');
} else {
setSuccessMsg(Username);
}
if (Emailval === "") {
setErrorMsg(Email, 'Email cannot be blank');
} else if (!isEmail(Emailval)) {
setErrorMsg(Emailval, ' type your email correctly');
} else {
setSuccessMsg(Email);
}
function setErrorMsg(input, errormsgs) {
const formControl = input.parentElement;
const small = formControl.queryselector('small');
formControl.className = "form-control error small";
small.innerText = errormsgs;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="container">
<div class="header">
<h2>Registration form</h2>
<div>
<form class="form" id="form">
<div class="form-control">
<label>Username</label>
<input type="text" id="username" placeholder="Enter your full name" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Msg</small>
</div>
<div>
<form class="form" id="form">
<div class="form-control">
<label>Email</label>
<input type="email" id="Email" placeholder="Enter your Email" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Msg</small>
</div>
<div>
<form class="form" id="form">
<div class="form-control">
<label>Mobilenumber</label>
<input type="number" id="phone" placeholder="Enter your Mobile num" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Msg</small>
</div>
<div>
<form class="form" id="form">
<div class="form-control">
<label>password</label>
<input type="text" id="password" placeholder="Enter your password" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Msg</small>
</div>
<div>
<form class="form" id="form">
<div class="form-control">
<label>Confirmpassword</label>
<input type="text" id="Confirm password" placeholder="Enter your password again" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Msg</small>
</div>
<input type="submit" value="submit" class="btn" name="">

</form>
</div>

Answer 1

这里是所有的错误修复。

请学习我改变了什么

拼写和大小写在JavaScript中很重要

是一致的。明智而一致地使用camelCase

也建议是DRY -所以我有一个消息功能给你

实际上，isEmail可以被删除，因为HTML5的验证会为它做。

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
form.addEventListener('submit', (event) => {
if (!validate()) event.preventDefault();
})
const setMsg = (input, errormsg) => {
const formControl = input.closest(".form-control");
formControl.querySelector(".fas").classList.toggle("fa-check-circle", !errormsg)
formControl.querySelector(".fas").classList.toggle("fa-exclamation-circle", errormsg)
formControl.querySelector('small').textContent = errormsg ? errormsg : "OK";
formControl.querySelector('.msg').style.display = "inline";
};
const isEmail = (Emailval) => {
var atsymbol = Emailval.indexOf('@');
if (atsymbol < 1) return false;
var dot = Emailval.lastIndexOf('.');
if (dot <= atsymbol + 2) return false;
if (dot === Emailval.length - 1) return false;
return true;
}
const validate = () => {
const usernameVal = username.value.trim();
const emailVal = email.value.trim();
const phoneVal = phone.value.trim();
const passwordval = password.value.trim();
const confirmPasswordVal = confirmPassword.value.trim();
if (usernameVal === "") {
setMsg(username, 'username cannot be blank');
return false
} else if (usernameVal.length <= 2) {
setMsg(username, 'username must have 3 cheacter');
return false
} else {
setMsg(username);
}
if (emailVal === "") {
setMsg(email, 'Email cannot be blank');
return false
} else if (!isEmail(emailVal)) {
setMsg(email, ' type your email correctly');
return false
} else {
setMsg(email);
}
}

.msg {
display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="container">
<div class="header">
<h2>Registration form</h2>
<form class="form" id="form">
<div>
<div class="form-control">
<label>Username</label>
<input type="text" id="username" placeholder="Enter your full name" autocomplete="off">
<span class="msg"><i class="fas"></i> <small></small></span>
</div>
<div class="form-control">
<label>Email</label>
<input type="email" id="email" placeholder="Enter your Email" autocomplete="off">
<span class="msg"><i class="fas"></i> <small></small></span>
</div>
<div class="form-control">
<label>Mobilenumber</label>
<input type="number" id="phone" placeholder="Enter your Mobile num" autocomplete="off">
<span class="msg"><i class="fas"></i> <small></small></span>
</div>
<div class="form-control">
<label>password</label>
<input type="text" id="password" placeholder="Enter your password" autocomplete="off">
<span class="msg"><i class="fas"></i> <small></small></span>
</div>
<div class="form-control">
<label>Confirmpassword</label>
<input type="text" id="confirmPassword" placeholder="Enter your password again" autocomplete="off">
<span class="msg"><i class="fas"></i> <small></small></span>
</div>
<input type="submit" value="submit" class="btn" name="">
</div>
</form>
</div>