Angular表单空字段客户端验证及Checkform方法触发问题

问题根源及修复步骤： #

你的代码存在几处关键问题导致验证不触发，逐一修复即可解决：

1. 修正HTML语法错误

原HTML的input标签存在属性未闭合、重复id的语法问题，会导致DOM解析异常，直接影响后续方法调用和验证逻辑：

• class="form-control id="username" 缺少"闭合class属性
• 每个input重复设置了id属性（如第一个input同时有id="username"和id="txtUsername"）

修复后的HTML代码：

<div>
    <form class="login">
        <p class="title">Log in</p>
        <input type="text" class="form-control" id="txtUsername" required>
        <div class="invalid-feedback">
            Please provide Username
        </div>
        <input type="password" class="form-control" id="txtPass" required>
        <div class="invalid-feedback">
            Please provide Password
        </div>
        <br>            
        <button type="button" onclick="Checkform()">
            <span class="state">Log in</span>
        </button>
    </form>
</div>

注：密码输入框建议改用type="password"，更符合登录场景的安全性要求。

2. 确保Checkform方法可全局访问

如果是在TypeScript模块中编写的方法，需要将其挂载到全局window对象上，否则HTML中的onclick无法找到该方法：

// 将方法挂载到全局window对象
(window as any).Checkform = function() {
    const form = document.getElementsByClassName('login')[0] as HTMLFormElement;
    if (!form.checkValidity()) {
        event?.preventDefault();
        event?.stopPropagation();
    }
    form.classList.add('was-validated');
}

3. 优化验证逻辑（可选）

如果希望贴合Bootstrap的原生验证逻辑，可以把按钮改为type="submit"，并监听表单的submit事件，这样浏览器默认的验证提示也会触发：

<!-- 修改按钮类型为submit -->
<button type="submit">
    <span class="state">Log in</span>
</button>

对应的TS代码：

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementsByClassName('login')[0] as HTMLFormElement;
    form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
    });
});

这种方式无需依赖onclick，更符合现代前端的事件绑定规范。

修复完成后，点击登录按钮会触发表单验证，空字段会显示你设置的invalid-feedback提示，同时was-validated类会被添加到表单上，Bootstrap的验证样式会正常生效。

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