Bootstrap 4 表单验证 - 调用 checkValidity() 后自定义样式不起作用

Question

form 标签指定 class="needs-validation" 并具有 novalidate 属性来指示自定义验证。

当代码运行并显示表单时，单击带有空文本字段的按钮，因为它是必需的，所以它应该显示消息并将字段样式设置为红色。

通过调用 checkValidity() 进行验证，它为空字段返回 false，但该字段的样式既不是 :invalid 也不是 ：有效。

这是关于我正在尝试的文档：https://getbootstrap.com/docs/4.0/components/forms/#validation

谢谢

$(function () {
    $("#btnSubmit").on("click", function (e) {
        var form = $("#CertForm")[0];
        var isValid = form.checkValidity();
        if (!isValid) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
        return false; // For testing only to stay on this page
    });
});

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"></script>
<!-- 
  Why neither feedback displays when clicking Submit?
  Also, the required txtName input field should be red if invalid
-->

<form id="CertForm" class="needs-validation" novalidate="">
    <label for="txtName"> * Name:</label>
    <input id="txtName" required /> Blank for Invalid case
    <div class="invalid-feedback">Please enter a name</div>
    <div class="valid-feedback">Looks good!</div>
    <br />
    <button id="btnSubmit" type="submit" class="btn btn-primary">Click Me!</button>
</form>

Answer 1

您错过了输入元素的 form-control 类。正如引导程序所说：

文本表单控件（如 <input>、<select> 和 <textarea>）是 使用 .form-control 类进行样式设置。包括一般样式 外观、焦点状态、大小等。

顺便说一句，你还没有设置像“文本”这样的输入类型。

工作代码：

$(function () {
    $("#btnSubmit").on("click", function (e) {
        var form = $("#CertForm")[0];
        var isValid = form.checkValidity();
        if (!isValid) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
        return false; // For testing only to stay on this page
    });
});

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"></script>
<!-- 
  Why neither feedback displays when clicking Submit?
  Also, the required txtName input field should be red if invalid
-->

<form id="CertForm" class="needs-validation" novalidate="">
    <label for="txtName"> * Name:</label>
    <input id="txtName" class="form-control" type="text" required /> Blank for Invalid case
    <div class="invalid-feedback">Please enter a name</div>
    <div class="valid-feedback">Looks good!</div>
    <br />
    <button id="btnSubmit" type="submit" class="btn btn-primary">Click Me!</button>
</form>