如何在HTML中点击登录按钮时显示红色错误提示信息

你的现有HTML已经带有data-validate属性，我们可以通过JavaScript+CSS实现点击登录按钮时显示红色错误提示，具体步骤如下：

1. 添加错误提示的CSS样式 #

在<head>标签内插入以下样式，定义错误提示的外观：

/* 错误提示文字样式 */
.error-message {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    display: none; /* 默认隐藏 */
}

/* 输入框错误状态边框（可选） */
.wrap-input100.error .input100 {
    border: 1px solid #ff0000;
}

2. 给输入容器添加错误提示元素 #

修改HTML结构，在每个wrap-input100容器内新增错误提示的<span>标签：

<!-- 用户名输入区域 -->
<div class="wrap-input100 validate-input m-b-36" data-validate="Username is required">
    <input class="input100" type="text" name="username">
    <span class="focus-input100"></span>
    <!-- 新增错误提示容器 -->
    <span class="error-message"></span>
</div>

<!-- 密码输入区域 -->
<div class="wrap-input100 validate-input m-b-12" data-validate="Password is required">
    <span class="btn-show-pass">
        <i class="fa fa-eye"></i>
    </span>
    <input class="input100" type="password" name="pass">
    <span class="focus-input100"></span>
    <!-- 新增错误提示容器 -->
    <span class="error-message"></span>
</div>

3. 编写表单验证的JavaScript逻辑 #

在</body>标签前插入以下JS代码，监听表单提交事件并执行验证：

// 获取登录表单
const loginForm = document.querySelector('.login100-form');

// 监听表单提交事件
loginForm.addEventListener('submit', function(e) {
    let isFormValid = true;

    // 清除之前的错误状态
    document.querySelectorAll('.wrap-input100').forEach(container => {
        container.classList.remove('error');
        container.querySelector('.error-message').style.display = 'none';
    });

    // 遍历需要验证的输入框
    document.querySelectorAll('.validate-input').forEach(container => {
        const input = container.querySelector('input');
        const errorText = container.dataset.validate;

        // 验证输入是否为空（可扩展其他规则，比如密码长度）
        if (!input.value.trim()) {
            isFormValid = false;
            container.classList.add('error');
            container.querySelector('.error-message').textContent = errorText;
            container.querySelector('.error-message').style.display = 'block';
        }
    });

    // 验证不通过时阻止表单提交
    if (!isFormValid) {
        e.preventDefault();
    }
});

可选优化：实时清除错误状态 #

添加输入框输入时的监听，实时清除错误提示：

// 输入时自动清除对应输入框的错误状态
document.querySelectorAll('.input100').forEach(input => {
    input.addEventListener('input', function() {
        const parentContainer = this.closest('.wrap-input100');
        parentContainer.classList.remove('error');
        parentContainer.querySelector('.error-message').style.display = 'none';
    });
});

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