Vleresimi
Jepni reagime të vlefshme dhe të zbatueshme për përdoruesit tuaj me vërtetimin e formularit HTML5, nëpërmjet sjelljeve të paracaktuara të shfletuesit ose stileve të personalizuara dhe JavaScript-it.
Si punon
Ja se si funksionon vërtetimi i formularit me Bootstrap:
- Vlefshmëria e formës HTML zbatohet nëpërmjet dy pseudo-klasave të CSS,
:invalid
dhe:valid
. Zbatohet për<input>
,<select>
dhe<textarea>
elementë. - Bootstrap shtrin stilet
:invalid
dhe:valid
në klasën prind.was-validated
, zakonisht aplikohet në<form>
. Përndryshe, çdo fushë e kërkuar pa vlerë shfaqet si e pavlefshme në ngarkimin e faqes. Në këtë mënyrë, ju mund të zgjidhni kur t'i aktivizoni ato (zakonisht pasi tentohet të dorëzohet formulari). - Për të rivendosur pamjen e formularit (për shembull, në rastin e paraqitjeve dinamike të formularit duke përdorur AJAX), hiqni
.was-validated
klasën nga<form>
përsëri pas dorëzimit. - Si rezervë,
.is-invalid
dhe.is-valid
klasat mund të përdoren në vend të pseudo-klasave për vërtetimin nga ana e serverit . Ata nuk kërkojnë një.was-validated
klasë prindërore. - Për shkak të kufizimeve në mënyrën se si funksionon CSS, ne nuk mund (për momentin) të aplikojmë stile në një
<label>
që vjen përpara një kontrolli formulari në DOM pa ndihmën e JavaScript-it të personalizuar. - Të gjithë shfletuesit modern mbështesin API-në e vlefshmërisë së kufizimeve , një seri metodash JavaScript për vërtetimin e kontrolleve të formularit.
- Mesazhet e komenteve mund të përdorin parazgjedhjet e shfletuesit (të ndryshme për çdo shfletues, dhe të pa stilizuara nëpërmjet CSS) ose stilet tona të personalizuara të komenteve me HTML dhe CSS shtesë.
- Ju mund të jepni mesazhe të personalizuara të vlefshmërisë
setCustomValidity
në JavaScript.
Duke pasur parasysh këtë, merrni parasysh demonstrimet e mëposhtme për stilet tona të verifikimit të formularit të personalizuar, klasat opsionale nga ana e serverit dhe parazgjedhjet e shfletuesit.
Stilet e personalizuara
Për mesazhet e personalizuara të vërtetimit të formularit Bootstrap, do t'ju duhet të shtoni novalidate
atributin boolean në <form>
. Kjo çaktivizon këshillat e parazgjedhur të veglave të komenteve të shfletuesit, por gjithsesi siguron qasje në API-të e vërtetimit të formularit në JavaScript. Mundohuni të dorëzoni formularin e mëposhtëm; JavaScript ynë do të përgjojë butonin e dorëzimit dhe do t'ju përcjellë komentet. Kur përpiqeni të dorëzoni, do të shihni stilet :invalid
dhe :valid
të aplikuara në kontrollet e formularit tuaj.
Stilet e personalizuara të komenteve aplikojnë ngjyra të personalizuara, kufij, stile fokusi dhe ikona të sfondit për të komunikuar më mirë reagimet. Ikonat e sfondit për <select>
s janë të disponueshme vetëm me .form-select
dhe jo .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)
})
})()
Parazgjedhjet e shfletuesit
Nuk jeni të interesuar për mesazhet e komenteve të verifikimit të personalizuar ose për të shkruar JavaScript për të ndryshuar sjelljet e formularit? Gjithçka mirë, mund të përdorni parazgjedhjet e shfletuesit. Provoni të dërgoni formularin e mëposhtëm. Në varësi të shfletuesit dhe sistemit operativ, do të shihni një stil paksa të ndryshëm reagimesh.
Ndërsa këto stile reagimesh nuk mund të stilohen me CSS, ju mund të personalizoni tekstin e komenteve përmes 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>
Ana e serverit
Ne rekomandojmë përdorimin e vlefshmërisë nga ana e klientit, por në rast se keni nevojë për vërtetim nga ana e serverit, mund të tregoni fushat e pavlefshme dhe të vlefshme të formularit me .is-invalid
dhe .is-valid
. Vini re se .invalid-feedback
mbështetet edhe me këto klasa.
Për fushat e pavlefshme, sigurohuni që reagimi/mesazhi i gabimit të pavlefshëm të lidhet me fushën përkatëse të formularit duke përdorur aria-describedby
(duke vënë në dukje se ky atribut lejon id
që të referohen më shumë se një, në rast se fusha tashmë tregon tekstin shtesë të formularit).
Për të rregulluar problemet me rrezet kufitare , grupet hyrëse kërkojnë një .has-validation
klasë shtesë.
<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>
Elementet e mbështetur
Stilet e verifikimit janë të disponueshme për kontrollet dhe komponentët e mëposhtëm të formularit:
<input>
s dhe<textarea>
s me.form-control
(duke përfshirë deri në një.form-control
në grupet hyrëse)<select>
s me.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>
Këshilla për veglat
Nëse faqosja e formularit tuaj e lejon këtë, ju mund t'i ndërroni .{valid|invalid}-feedback
klasat me .{valid|invalid}-tooltip
klasa për të shfaqur komentet e vërtetimit në një këshillë mjeti të stiluar. Sigurohuni që të keni një prind me position: relative
të për pozicionimin e majës së veglave. Në shembullin e mëposhtëm, klasat tona të kolonave e kanë tashmë këtë, por projekti juaj mund të kërkojë një konfigurim alternativ.
<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
Variablat
$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>");
Përzierjet
Dy miksin kombinohen së bashku, përmes ciklit tonë , për të gjeneruar stilet tona të komenteve të vërtetimit të formës.
@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;
}
}
}
}
Harta
Kjo është harta e vërtetimit Sass nga _variables.scss
. Anuloni ose zgjeroni këtë për të gjeneruar gjendje të ndryshme ose shtesë.
$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
)
);
Hartat e $form-validation-states
mund të përmbajnë tre parametra opsionale për të anashkaluar këshillat e veglave dhe stilet e fokusimit.
Lak
Përdoret për të përsëritur $form-validation-states
vlerat e hartës për të gjeneruar stilet tona të vërtetimit. Çdo modifikim në hartën e mësipërme Sass do të pasqyrohet në CSS-në tuaj të përpiluar nëpërmjet këtij cikli.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Përshtatje
Gjendjet e verifikimit mund të personalizohen nëpërmjet Sass me $form-validation-states
hartën. E vendosur në _variables.scss
skedarin tonë, kjo hartë Sass është mënyra se si ne gjenerojmë gjendjet e parazgjedhura valid
/ invalid
vleftësimit. Përfshihet një hartë e ndërthurur për përshtatjen e ngjyrës, ikonës, ngjyrës së këshillës së veglave dhe hijes së fokusit të çdo shteti. Ndërsa asnjë shtet tjetër nuk mbështetet nga shfletuesit, ata që përdorin stile të personalizuara mund të shtojnë lehtësisht reagime më komplekse të formës.
Ju lutemi vini re se ne nuk rekomandojmë personalizimin e $form-validation-states
vlerave pa modifikuar gjithashtu form-validation-state
miksin .