Validācija
Sniedziet lietotājiem vērtīgas, praktiskas atsauksmes, izmantojot HTML5 veidlapu validāciju, izmantojot pārlūkprogrammas noklusējuma darbības vai pielāgotus stilus un JavaScript.
Kā tas strādā
Lūk, kā veidlapu validācija darbojas ar Bootstrap:
- HTML veidlapas validācija tiek lietota, izmantojot divas CSS pseidoklases
:invalid
un:valid
. Tas attiecas uz<input>
,<select>
un<textarea>
elementiem. - Bootstrap aptver
:invalid
un:valid
stilus uz vecāku.was-validated
klasi, kas parasti tiek lietots<form>
. Pretējā gadījumā jebkurš obligātais lauks bez vērtības lapas ielādes laikā tiek rādīts kā nederīgs. Tādā veidā jūs varat izvēlēties, kad tās aktivizēt (parasti pēc veidlapas iesniegšanas mēģinājuma). - Lai atiestatītu veidlapas izskatu (piemēram, dinamisku veidlapu iesniegšanas gadījumā, izmantojot AJAX), pēc iesniegšanas vēlreiz noņemiet
.was-validated
klasi no veidlapas.<form>
- Kā rezerves,
.is-invalid
un.is-valid
klases var izmantot pseidoklases vietā servera puses validācijai . Viņiem nav nepieciešama.was-validated
vecāku klase. - CSS darbības ierobežojumu dēļ mēs (pašlaik) nevaram lietot stilus,
<label>
kas atrodas pirms veidlapas vadīklas DOM, neizmantojot pielāgotu JavaScript. - Visas mūsdienu pārlūkprogrammas atbalsta ierobežojumu validācijas API — JavaScript metožu sēriju veidlapu vadīklu apstiprināšanai.
- Atsauksmju ziņojumos var tikt izmantoti pārlūkprogrammas noklusējuma iestatījumi (atšķirīgi katrā pārlūkprogrammā un nav stilizēti, izmantojot CSS) vai mūsu pielāgotie atsauksmju stili ar papildu HTML un CSS.
- Varat nodrošināt pielāgotus derīguma ziņojumus ar
setCustomValidity
JavaScript.
Paturot to prātā, apsveriet tālāk norādītās demonstrācijas par mūsu pielāgotajiem veidlapu validācijas stiliem, papildu servera puses klasēm un pārlūkprogrammas noklusējuma iestatījumiem.
Pielāgoti stili
Pielāgotiem Bootstrap veidlapas validācijas ziņojumiem jums būs jāpievieno novalidate
Būla atribūts savam <form>
. Tādējādi tiek atspējoti pārlūkprogrammas noklusējuma atsauksmju rīka padomi, taču joprojām tiek nodrošināta piekļuve veidlapu validācijas API JavaScript. Mēģiniet iesniegt zemāk esošo veidlapu; mūsu JavaScript pārtvers iesniegšanas pogu un nosūtīs jums atsauksmes. Mēģinot iesniegt, jūs redzēsit veidlapas vadīklām piemērotos stilus :invalid
un .:valid
Pielāgotie atsauksmju stili izmanto pielāgotas krāsas, apmales, fokusa stilus un fona ikonas, lai labāk sniegtu atsauksmes. Fona ikonas priekš <select>
s ir pieejamas tikai ar .form-select
, bet ne .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)
})
})()
Pārlūka noklusējuma iestatījumi
Vai neinteresē pielāgotas validācijas atgriezeniskās saites ziņojumi vai JavaScript rakstīšana, lai mainītu veidlapas darbību? Viss kārtībā, varat izmantot pārlūkprogrammas noklusējuma iestatījumus. Mēģiniet iesniegt zemāk esošo veidlapu. Atkarībā no pārlūkprogrammas un operētājsistēmas jūs redzēsit nedaudz atšķirīgu atsauksmju stilu.
Lai gan šos atsauksmju stilus nevar veidot ar CSS, jūs joprojām varat pielāgot atsauksmju tekstu, izmantojot 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>
Servera puse
Mēs iesakām izmantot klienta puses validāciju, taču, ja nepieciešama servera puses validācija, nederīgos un derīgos veidlapas laukus varat norādīt ar .is-invalid
un .is-valid
. Ņemiet vērā, ka .invalid-feedback
tas tiek atbalstīts arī šajās klasēs.
Ja lauki ir nederīgi, pārliecinieties, vai nederīgais atgriezeniskās saites/kļūdas ziņojums ir saistīts ar attiecīgo veidlapas lauku, izmantojot aria-describedby
(ņemot vērā, ka šis atribūts ļauj id
atsaukties uz vairāk nekā vienu, ja lauks jau norāda uz papildu veidlapas tekstu).
Lai novērstu problēmas ar apmales rādiusiem , ievades grupām ir nepieciešama papildu .has-validation
klase.
<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>
Atbalstītie elementi
Validācijas stili ir pieejami šādām veidlapas vadīklām un komponentiem:
<input>
s un<textarea>
s ar.form-control
(ieskaitot līdz vienam.form-control
ievades grupās)<select>
s ar.form-select
.form-check
s
<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>
Rīku padomi
Ja jūsu veidlapas izkārtojums to atļauj, varat apmainīt .{valid|invalid}-feedback
klases pret .{valid|invalid}-tooltip
klasēm, lai parādītu validācijas atsauksmes stila rīka padomos. position: relative
Rīka padoma pozicionēšanai noteikti ir jābūt kādam no vecākiem . Tālāk esošajā piemērā mūsu kolonnu klasēs tas jau ir, taču jūsu projektam var būt nepieciešama alternatīva iestatīšana.
<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>
Sass
Mainīgie lielumi
$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>");
Maisījumi
Mūsu cilpas ietvaros tiek apvienoti divi sajaukti , lai ģenerētu mūsu veidlapas validācijas atgriezeniskās saites stilus.
@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;
}
}
}
}
Karte
Šī ir Sass validācijas karte no _variables.scss
. Ignorēt vai paplašināt to, lai ģenerētu dažādus vai papildu stāvokļus.
$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
)
);
Kartes $form-validation-states
var ietvert trīs izvēles parametrus, lai ignorētu rīka padomus un fokusa stilus.
Cilpa
Izmanto, lai atkārtotu $form-validation-states
kartes vērtības, lai ģenerētu mūsu validācijas stilus. Visas iepriekš minētās Sass kartes izmaiņas tiks atspoguļotas jūsu apkopotajā CSS, izmantojot šo cilpu.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Pielāgošana
Validācijas stāvokļus var pielāgot, izmantojot Sass ar $form-validation-states
karti. Šī Sass karte, kas atrodas mūsu _variables.scss
failā, ir veids, kā mēs ģenerējam noklusējuma valid
/ invalid
validācijas stāvokļus. Iekļauts ir ligzdots karte katra stāvokļa krāsas, ikonas, rīka padoma krāsas un fokusa ēnas pielāgošanai. Lai gan pārlūkprogrammas neatbalsta citus stāvokļus, tie, kas izmanto pielāgotus stilus, var viegli pievienot sarežģītākas veidlapas atsauksmes.
Lūdzu, ņemiet vērā, ka mēs neiesakām pielāgot $form-validation-states
vērtības, nepārveidojot arī form-validation-state
mixin .