谁能帮我找出我的表单验证代码有什么问题？

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

I am writing this code for a form validation for a project I am doing but it isn't responding as needed too.我正在为我正在做的项目的表单验证编写此代码，但它也没有根据需要做出响应。 The error messages given aren't the ones I specified and/ or only appear on the first textbox and it doesn't put out the setSuccessFor function.给出的错误消息不是我指定的和/或仅出现在第一个文本框中的错误消息，并且它没有推出 setSuccessFor 函数。 Any help help would be appreciated任何帮助将不胜感激

Image of incorrect error messages for reference供参考的错误错误消息的图像

Answer 1

The issue is you're targeting the span with document.querySelector('span') which picks up the first span in the entire document.问题是您使用document.querySelector('span')定位跨度，该跨度选择整个文档中的第一个跨度。 You want to call that from the reference point of the container div.您想从容器 div 的参考点调用它。 Also, rather than parentElement (which is fine), I prefer closest() since it will be flexible if your html structure changes.此外，我更喜欢closest() ，而不是 parentElement（这很好），因为如果您的 html 结构发生变化，它会很灵活。 Finally, you can add and remove classes via classList , which free's up the need for you to overwrite the entire set of class names for any given element最后，您可以通过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');
}

Answer 2

It's because of this method:是因为这个方法：

function setErrorFor(input, message){
    const formControl = input.parentElement; // .form-control
    const span = document.querySelector("span");

    //Add error message inside span
    span.innerText = message;
}

You don't select a specific span so it's not the one that you are looking for.您没有选择特定的跨度，因此它不是您要查找的跨度。

So you have to find it thanks to formControl所以你必须通过 formControl 找到它

谁能帮我找出我的表单验证代码有什么问题？

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-07-29 15:18:20

解决方案2
0 2021-07-29 15:18:52

谁能帮我找出我的表单验证代码有什么问题？

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-07-29 15:18:20

解决方案2 0 2021-07-29 15:18:52

解决方案1
0 已采纳 2021-07-29 15:18:20

解决方案2
0 2021-07-29 15:18:52