bootstrap выберите проверку меню, работающую в firefox, но не в chrome - PullRequest
Новая
       25

bootstrap выберите проверку меню, работающую в firefox, но не в chrome

0 голосов
/ 15 апреля 2020

Я работаю над проектом, связанным с HTML формами. Я использую bootstrap для проверки формы, но я мог столкнуться с проблемой. Когда я добавил меню выбора в форму и протестировал проверку формы, в других полях ввода отображались стили проверки только в меню выбора в firefox. Не в chrome или краю. Проверьте скриншоты ниже:

Firefox:

enter image description here

Chrome:

enter image description here

На изображениях четко видно, что проверка выбора меню работает только для Firefox, но не для chrome. Я также упомянул фрагмент кода ниже: (Попробуйте запустить фрагмент в firefox) 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class="col-lg-7 mx-auto mt-5">
            <form action="?" method="POST" class="was-validated" novalidate="">
                <div class="form-group">
                    <select name="mySelect" class="custom-select" required="">
                        <option disabled="" selected="" hidden="">Choose</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                    </select>
                    <p class="invalid-feedback">You must choose an option</p>
                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Итак, мои вопросы:

  1. Есть ли способ заставить bootstrap выбрать работу проверки для chrome также?
  2. Есть ли что-то, чего мне здесь не хватает?

1 Ответ

0 голосов
/ 15 апреля 2020

Добавить value атрибут для ошибок показа. chrome определяет empty строку в значении и показывает действительный ввод, для этого в chrome необходимо использовать атрибут value без указания значения.

Пожалуйста, используйте required, а не required='', с required='' проблем нет, но required - промышленный выбор. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-lg-7 mx-auto mt-5">
            <form action="?" method="POST" class="was-validated" novalidate>
                <div class="form-group">
                    <select name="mySelect" class="custom-select" required>
                        <option disabled selected hidden value>Choose</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                    </select>
                    <p class="invalid-feedback">You must choose an option</p>
                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...