表单客户端验证失效求助：仅验证姓名输入框与文本域

核心问题分析 #

1. 硬覆盖父容器类名：你的JS代码中直接用formControl.className = 'name-style error'替换父容器类名，而文本域的父容器类是textarea-style，这会丢失原有样式，导致验证状态无法正确应用。
2. 缺少状态样式：没有为.error和.success状态编写CSS样式，即使JS逻辑生效，也看不到任何视觉反馈。

修正后的完整代码 #

HTML（无需修改，保持原有结构）

<div class="form-container">
    <h1>CONTACT <span>ME</span></h1>
 <form action="" id="form">
    <div class="name">
        <label for="name"><span>N</span>ame:</label>
        <div class="name-style">
        <input type="name" id="name" class="name-input" placeholder="Enter your name" title="Please enter your name" required>
        <i class="fas fa-check-circle"></i>
        <i class="fas fa-exclamation-circle"></i>
        <small>Error message</small>
        </div>
    </div>
    <div class="e-mail">
        <label for="email"><span>E</span>mail:</label>
        <div class="input-style">
        <input type="email" id="email" class="email-input" placeholder="Enter email address" onkeydown="validation()" title="Please enter an email address" required>
        <i class="fas fa-check-circle"></i>
        <i class="fas fa-exclamation-circle"></i>
        </div>
        <small id="text"></small>
    </div>
    <div class="textarea">
        <label for="message"><span>M</span>essage:</label>
        <div class="textarea-style">
            <textarea name="text-message" id="message" cols="16" rows="10" placeholder="Write a Message" title="Write your message here" required></textarea>
        <i class="fas fa-check-circle"></i>
        <i class="fas fa-exclamation-circle"></i>
        <small>Error message</small>
        </div>
    </div>
    <button type="submit" id="form_btn">send</button>
 </form>
</div>

JavaScript（修改类操作逻辑）

const form = document.getElementById('form');
const Username = document.getElementById('name');
const message = document.getElementById('message');

form.addEventListener('submit', e => {
    e.preventDefault();
    checkInputs();
});

function checkInputs(){
    const UsernameValue = Username.value.trim();
    const messageValue = message.value.trim();

    if(UsernameValue === '') {
        setErrorFor(Username, 'Name cannot be blank');
    } else {
        setSuccessFor(Username);
    }
    if(messageValue === ''){
        setErrorFor(message, 'Message cannot be blank');
    } else {
        setSuccessFor(message);
    }
}

function setErrorFor(input, errorMessage) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    // 保留原有类名，仅切换状态类
    formControl.classList.remove('success');
    formControl.classList.add('error');
    small.innerText = errorMessage;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    // 保留原有类名，仅切换状态类
    formControl.classList.remove('error');
    formControl.classList.add('success');
    small.innerText = ''; // 清空错误提示
}

CSS（补充状态样式）

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* 表单容器基础样式 */
.form-container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* 表单组通用样式 */
.name-style, .textarea-style {
    position: relative;
    margin-top: 0.5rem;
}

/* 输入框/文本域基础样式 */
.name-input, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

/* 错误状态样式 */
.error input, .error textarea {
    border-color: #e74c3c;
}

.error small {
    color: #e74c3c;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}

/* 成功状态样式 */
.success input, .success textarea {
    border-color: #2ecc71;
}

/* 图标显示控制 */
.fas {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: none;
}

.success .fa-check-circle {
    color: #2ecc71;
    display: block;
}

.error .fa-exclamation-circle {
    color: #e74c3c;
    display: block;
}

/* 提交按钮样式 */
#form_btn {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

#form_btn:hover {
    background-color: #2980b9;
}

关键修正说明 #

• 使用classList.add()/classList.remove()替代直接赋值className，保留父容器原有样式类，避免结构混乱
• 补充完整的验证状态CSS样式，包括边框颜色、错误文本、图标显示，提供清晰的视觉反馈
• 优化成功状态处理，清空错误提示文本，避免残留信息

内容的提问来源于stack exchange，提问作者Agbom emmanuel