任何人都可以帮我找出我的表单验证代码有什么问题吗？

Question

<!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 函数。任何帮助将不胜感激

Image of incorrect error messages for reference

Answer 1

问题是您使用 document.querySelector('span') 定位跨度，它选择了整个文档中的第一个跨度。您想要从容器 div 的参考点调用它。此外，我更喜欢 closest() 而不是 parentElement（这很好），因为如果您的 html 结构发生变化，它会很灵活。最后，您可以通过 classList 添加和删除 classes，这样您就无需覆盖任何给定元素

的整个 class 名称集

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');
}

任何人都可以帮我找出我的表单验证代码有什么问题吗？

Can anyone help me find out what's wrong with my form validation code?

html

javascript

css

forms

validation