<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/createanaccount.css">
<script src="https://kit.fontawesome.com/c90e5c3147.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h2>Create An Account</h2>
</div>
<form class="form" id="form">
<div class="form-control">
<label>Full Name</label>
<input type="text" placeholder="John Doe" id="fullname">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<span>Error Message</span>
</div>
<div class="form-control">
<label>Email</label>
<input type="email" placeholder="johndoe@gmail.com" id="email">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<span>Error Message</span>
</div>
<div class="form-control">
<label>Phone Number</label>
<input type="tel" placeholder="" id="phonenumber">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<span>Error Message</span>
</div>
<div class="form-control">
<label>Password</label>
<input type="password" placeholder="" id="password">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<span>Error Message</span>
</div>
<div class="form-control">
<label>Confirm Password</label>
<input type="password" placeholder="Confirm your password" id="confirmpassword">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<span>Error Message</span>
</div>
<button>Create Account</button>
</form>
</div>
<script src="js/createanaccount.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
box-sizing: border-box;
}
body{
background-color: #9b59b6;
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
span{
font-size: 0.8rem;
}
.container{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 400px;
max-width: 100%;
}
.header{
background-color: #f7f7f7;
border-bottom: 1px solid #f0f0f0;
padding: 20px 40px;
}
.header h2{
margin: 0;
}
.form{
padding: 30px 40px;
}
.form-control{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label{
display: inline-block;
margin-bottom: 5px;
}
.form-control input{
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control.success input{
border-color: #2ecc71;
}
.form-control.error input{
border-color: #e74c3c;
}
.form-control i{
position: absolute;
top: 40px;
right: 10px;
visibility: hidden;
}
.form-control.success i.fa-check-circle{
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle{
color: #e74c3c;
visibility: visible;
}
.form-control span{
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
}
.form-control.error span{
color: #e74c3c;
visibility: visible;
}
.form button{
background-color: #8e44ad;
border: 2px solid #8e44ad;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
width: 100%;
}
.form button:hover{
cursor: pointer;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.8);
}
const form = document.getElementById("form");
const fullname = document.getElementById("fullname");
const email = document.getElementById("email");
const phonenumber = document.getElementById("phonenumber");
const password = document.getElementById("password");
const confirmpassword = document.getElementById("confirmpassword");
form.addEventListener("submit", e => {
e.preventDefault();
checkInputs();
});
function checkInputs(){
//Get the values from the inputs
const fullnameValue = fullname.value.trim();
const emailValue = email.value.trim();
const phonenumberValue = phonenumber.value.trim();
const passwordValue = password.value.trim();
const confirmpasswordValue = confirmpassword.value.trim();
if(fullnameValue === ""){
//Show error
//Add error class
setErrorFor(fullname, 'Name cannot be blank');
}else{
//Add success class
setSuccessFor(fullname);
}
if(emailValue === ""){
setErrorFor(email, 'Email cannot be blank');
}else if(!isEmail(emailValue)){
setErrorFor(email, "Email is not valid");
}else{
setSuccessFor(email);
}
if(phonenumberValue === ""){
setErrorFor(phonenumber, 'Phone number cannot be blank');
}else if(!isPhoneNumber(phonenumberValue)){
setErrorFor(phonenumber, "Phone number is not valid");
}else{
setSuccessFor(fullname);
}
if(passwordValue === ""){
setErrorFor(password, 'Password cannot be blank');
}else if(passwordValue < 8){
setErrorFor(password, "Minimum password length is 8 characters");
}else{
setSuccessFor(password);
}
if(confirmpasswordValue === ""){
setErrorFor(confirmpassword, 'Confirm password cannot be blank');
}else if(passwordValue !== confirmpasswordValue){
setErrorFor(confirmpassword, 'Passwords do not match');
}else{
setSuccessFor(confirmpassword);
}
}
function setErrorFor(input, message){
const formControl = input.parentElement; // .form-control
const span = document.querySelector("span");
//Add error message inside span
span.innerText = message;
//Add error class
formControl.className = 'form-control error';
}
function setSuccessFor(input){
const formControl = input.parentElement;
formControl.classname = 'form-control success';
}
function isEmail(email){
return /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/.test(email);
}
function isPhoneNumber(phonenumber){
return /^d{10}$/.test(phonenumber);
}
我正在为我正在做的项目的表单验证编写此代码，但它没有根据需要响应。给出的错误信息不是我指定的和/或只出现在第一个文本框上，它不输出setSuccessFor函数。任何帮助，帮助，将不胜感激
不正确的错误信息图片供参考
问题是您的目标是document.querySelector('span')的跨度，它在整个文档中拾取第一个跨度。您希望从容器div的参考点调用它。此外，而不是parentElement(这很好)，我更喜欢closest()，因为如果您的html结构发生变化，它将是灵活的。最后，您可以通过classList添加和删除类，这使您无需覆盖任何给定元素的整个类名称集
function setErrorFor(input, message){
const formControl = input.closest('.form-control');
const span = formControl.querySelector("span");
span.innerText = message;
formControl.classList.remove('success');
formControl.classList.add('error');
}
function setSuccessFor(input){
const formControl = input.closest('.form-control');
formControl.classList.add('success');
formControl.classList.remove('error');
}