Тикшерү
HTML5 формасын тикшерү белән, кулланучыларга кыйммәтле, эшлекле җавап бирегез, браузерның гадәти тәртибе яки махсус стильләре һәм JavaScript аша.
Ничек бу эшли
Ботстрап белән форманы тикшерү ничек эшли:
- HTML формасын тикшерү CSSның ике псевдо-классы аша кулланыла,
:invalid
һәм:valid
. Бу элементларга<input>
кагыла .<select>
<textarea>
- Ботстрап ата-аналар классына
:invalid
һәм:valid
стильләрен киңәйтә, гадәттә . Otherwiseгыйсә, кыйммәтсез теләсә нинди кыр битнең йөкләнешендә яраксыз булып күрсәтелә. Шул рәвешле, сез аларны кайчан активлаштырырга икәнен сайлый аласыз (гадәттә форма тапшырылганнан соң)..was-validated
<form>
- Форманың тышкы кыяфәтен яңадан торгызу өчен (мәсәлән, AJAX ярдәмендә динамик форма җибәргән очракта), тапшырганнан соң
.was-validated
классны<form>
кабат бетерегез. - Кире кайту,
.is-invalid
һәм классларны сервер ягыннан тикшерү.is-valid
өчен псевдо-класслар урынына кулланырга мөмкин . Аларга ата- аналар сыйныфы кирәк түгел..was-validated
- CSS эшләвендәге чикләүләр аркасында, без (хәзерге вакытта) стильләрне
<label>
DOM'да форма контроле алдыннан килгән JavaScript ярдәмендә куллана алмыйбыз. - Барлык заманча браузерлар да чикләү тикшерү API -ны , форма контролен тикшерү өчен JavaScript ысуллары сериясен хуплый.
- Фикер алышу хәбәрләре браузерның дефолтларын кулланырга мөмкин (һәр браузер өчен төрле, һәм CSS аша тотрыксыз) яки өстәмә HTML һәм CSS ярдәмендә безнең гадәти җавап стильләре.
setCustomValidity
Сез JavaScript ярдәмендә махсус дөреслек хәбәрләрен бирә аласыз .
Шуны истә тотып, безнең махсус форманы тикшерү стиле, серверның өстәмә класслары, браузер дефолтлары өчен түбәндәге демоларны карагыз.
Махсус стильләр
Bootstrap формасын тикшерү хәбәрләре өчен сезгә novalidate
буле атрибутын өстәргә кирәк <form>
. Бу браузерның кире элемтә коралларын сүндерә, ләкин JavaScript'та форманы тикшерү API'ларына рөхсәт бирә. Түбәндәге форманы җибәрергә тырышыгыз; безнең JavaScript тапшыру төймәсен тотып торачак һәм сезгә кире элемтә. Тапшырырга тырышканда, сез форма контроллерында кулланылган стильләрне :invalid
һәм стильләрне күрерсез.:valid
Фикер алышуны яхшырак аралашу өчен, махсус стильләр махсус төсләр, чикләр, фокус стильләре һәм фон иконаларын кулланалар. S өчен фон иконалары <select>
бары тик мөмкин .form-select
, һәм юк .form-control
.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Браузер килешү
Форма тәртибен үзгәртү өчен махсус тикшерү җаваплары яки JavaScript язу белән кызыксынмыйсызмы? Барысы да яхшы, сез браузерның килешүләрен куллана аласыз. Түбәндәге форманы җибәреп карагыз. Сезнең браузерга һәм ОСка карап, сез бераз башка төрле стильне күрерсез.
Бу кире элемтә стильләрен CSS белән ясап булмый, сез барыбер JavaScript аша кире текстны көйли аласыз.
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
<div class="col-md-6">
<label for="validationDefault03" class="form-label">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Сервер ягы
Без клиент ягыннан тикшерүне кулланырга киңәш итәбез, ләкин сервер ягыннан тикшерүне таләп итсәгез, сез яраксыз һәм дөрес форма кырларын күрсәтә .is-invalid
аласыз .is-valid
. Игътибар итегез, .invalid-feedback
бу класслар белән дә ярдәм итә.
Яраксыз кырлар өчен, дөрес булмаган кире элемтә / хата хәбәре тиешле форма кыры белән бәйләнештә aria-describedby
булуын тикшерегез (бу атрибут бердән артык id
сылтама ясарга мөмкинлек бирә, бу кыр инде өстәмә форма текстын күрсәткән очракта).
Чик радиосы белән проблемаларны чишү өчен кертү төркемнәре өстәмә .has-validation
класс таләп итә.
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Ярдәмче элементлар
Тикшерү стильләре түбәндәге форма контроле һәм компонентлары өчен бар:
<input>
s һәм<textarea>
s белән.form-control
(.form-control
кертү төркемнәренә кадәр)<select>
s белән.form-select
.form-check
с
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="form-select" required aria-label="select example">
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid select feedback</div>
</div>
<div class="mb-3">
<input type="file" class="form-control" aria-label="file example" required>
<div class="invalid-feedback">Example invalid form file feedback</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
</div>
</form>
Кораллар
.{valid|invalid}-feedback
Әгәр дә сезнең форма макеты рөхсәт итсә, сез класслар өчен классларны алыштыра аласыз .{valid|invalid}-tooltip
. Кораллар урнаштыру өчен аның белән ата-анагыз булуына инаныгыз position: relative
. Түбәндәге мисалда безнең багана класслары инде бар, ләкин сезнең проект альтернатив көйләү таләп итә ала.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative">
<label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label for="validationTooltip03" class="form-label">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Сасс
Variзгәрешләр
$form-feedback-margin-top: $form-text-margin-top;
$form-feedback-font-size: $form-text-font-size;
$form-feedback-font-style: $form-text-font-style;
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;
$form-feedback-icon-valid-color: $form-feedback-valid-color;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
Миксинс
Ике миксин бергә кушылып, безнең цикл аша , безнең форманы тикшерү стильләрен булдыру өчен.
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 1;
} @else if $state == "invalid" {
z-index: 2;
}
&:focus {
z-index: 3;
}
}
}
}
Карта
Бу Sass картасын тикшерү _variables.scss
. Төрле яки өстәмә хәлләр тудыру өчен моны кире кагарга яки киңәйтергә.
$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);
Карталарда $form-validation-states
корал киңәшләрен һәм фокус стильләрен юкка чыгару өчен өч өстәмә параметр булырга мөмкин.
Loop
$form-validation-states
Безнең тикшерү стильләрен булдыру өчен карта кыйммәтләре өстендә кабатлау өчен кулланыла . Aboveгарыдагы Sass картасына теләсә нинди үзгәртүләр бу цикл аша тупланган CSSда чагылачак.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Custзенчәләштерү
Тикшерү халәтләрен Sass аша $form-validation-states
карта белән көйләргә мөмкин. Безнең _variables.scss
файлда урнашкан, бу Sass картасы - без килешү valid
/ invalid
тикшерү халәтләрен ничек ясыйбыз. Eachәрбер дәүләтнең төсен, иконасын, корал төсләрен, фокус күләгәсен көйләү өчен ояланган карта кертелгән. Башка штатлар браузерлар белән булышмаса да, махсус стильләр кулланучылар җиңелрәк форма редакциясен өсти алалар.
Зинһар, онытмагыз, без миксинны үзгәртмичә кыйммәтләрне көйләргә киңәш итмибез$form-validation-states
form-validation-state
.