Bootstrap5: валидация форм
Мы можем использовать различные классы валидации для настройки функциональности проверки форм.
.was-validatedили.needs-validationДобавленные к элементу <form>, поля ввода будут иметь зелёную (валидную) или красную (невалидную) рамку, указывающую, требует ли форма ввода.
.valid-feedbackили.invalid-feedbackЭти классы используются, чтобы сообщить пользователям, какая информация отсутствует или что нужно заполнить перед отправкой формы.
Пример
Используйте класс .was-validated, чтобы показать, что нужно заполнить перед отправкой формы:
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Имя пользователя:</label>
<input type="text" class="form-control" id="uname" placeholder="Введите имя пользователя" name="uname" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите имя пользователя!</div>
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите пароль!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" Имя="Запомнить" обязательно>Принять соглашение<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Вы должны согласиться с условиями перед отправкой.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</форма>
Попробуйте сами »
Пример
Используйте .needs-validation, который проверит отсутствующее содержимое после отправки формы. Здесь нужно добавить немного JavaScript-кода, чтобы код работал правильно:
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Имя пользователя:</label>
<input type="text" class="form-control" id="uname" placeholder="Введите имя пользователя" name="uname" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите имя пользователя!</div>
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите пароль!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" Имя="Запомнить" обязательно>Принять соглашение<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Вы должны согласиться с условиями перед отправкой.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
<script>// Предотвратить отправку формы, если валидация не пройдена
(function() {
'use strict';
window.addEventListener('load', function() {
// Получить все формы с классом валидации
var forms = document.getElementsByClassName('needs-validation');
// Пройти по ним и предотвратить отправку
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();</script>
Попробуйте сами »