Bootstrap 4 Проверка формы - пользовательский стиль не работает после вызова checkValidity ()

Question

Тег формы указывает class = "needs-validation" и имеет атрибут novalidate для указания пользовательской проверки.

Когда код запускается и отображает формунажмите кнопку с пустым текстовым полем, и, поскольку оно требуется, оно должно отобразить сообщение и оформить поле красным цветом.

Проверка происходит при вызове checkValidity () , и оно возвращает false для пустого поля, но поле не имеет стиль : недействительно или : действует .

Это документ о том, что я пытаюсь сделать: 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 для вашего элемента ввода.Как говорит начальная загрузка:

Элементы управления текстовой формы, такие как s, s и s, оформляются с помощью класса .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>