Okukakasa
Okuwa endowooza ez’omuwendo, ezisobola okukolebwako eri abakozesa bo n’okukakasa foomu ya HTML5, ng’oyita mu nneeyisa za bbulawuzi ezisookerwako oba emisono egy’ennono ne JavaScript.
Engeri gye kikola
Laba engeri okukakasa foomu gye kukola ne Bootstrap:
- Okukakasa foomu ya HTML kukozesebwa okuyita mu CSS's two pseudo-classes,
:invalid
ne:valid
. Kikwata ku<input>
,<select>
, ne<textarea>
elementi. - Bootstrap scopes the
:invalid
ne:valid
styles ku kiraasi y'omuzadde.was-validated
, ebiseera ebisinga ekozesebwa ku<form>
. Bwe kitaba ekyo, ennimiro yonna eyeetaagisa nga tewali muwendo eraga nga si ntuufu ku kutikka omuko. Mu ngeri eno, oyinza okusalawo ddi lw’ogenda okuzikola (ebiseera ebisinga oluvannyuma lw’okugezaako okuleeta foomu). - Okuddamu okuteekawo endabika ya foomu (okugeza, mu mbeera y’okuweereza foomu okukyukakyuka nga okozesa AJAX), ggyawo
.was-validated
ekibiina okuva mu<form>
nate oluvannyuma lw’okuweereza. - Nga fallback,
.is-invalid
era.is-valid
classes ziyinza okukozesebwa mu kifo kya pseudo-classes for server-side validation . Tezeetaaga.was-validated
kibiina kya bazadde. - Olw'ebizibu mu ngeri CSS gy'ekola, tetusobola (mu kiseera kino) kukozesa sitayiro ku a
<label>
ejja nga tennabaawo kufuga ffoomu mu DOM awatali buyambi bwa JavaScript eya bulijjo. - Browser zonna ez’omulembe ziwagira constraint validation API , omuddirirwa gw’enkola za JavaScript ez’okukakasa ebifuga foomu.
- Obubaka bw’okuddamu buyinza okukozesa ebisookerwako bya bbulawuzi (eby’enjawulo ku buli bbulawuzi, era nga tebiyinza kukolebwa nga biyita mu CSS) oba emisono gyaffe egy’okuddamu egy’ennono nga giriko HTML ne CSS ez’enjawulo.
- Oyinza okuwa obubaka obw'obutuufu obw'ennono ne
setCustomValidity
mu JavaScript.
Nga olina ekyo mu birowoozo, lowooza ku demos zino wammanga ez’emisono gyaffe egy’okukakasa foomu egy’ennono, kiraasi z’oludda lwa seva ez’okwesalirawo, n’ebisookerwako bya bbulawuzi.
Emisono egy’enjawulo
Ku bubaka obw'okukakasa foomu ya Bootstrap eya bulijjo, ojja kwetaaga okwongerako ekintu kya novalidate
boolean ku <form>
. Kino kiremesa ebikozesebwa eby'okuddamu ebisookerwako ebya bbulawuzi, naye nga kikyawa olukusa ku API z'okukakasa foomu mu JavaScript. Gezaako okuleeta foomu eno wammanga; JavaScript yaffe ejja kukwata button y'okuweereza n'okukuweereza endowooza yo. Bw’oba ogezaako okuleeta, ojja kulaba :invalid
ne :valid
sitayiro nga zikozesebwa ku bifuga foomu yo.
Emisono gy’okuddamu egy’enjawulo gikozesa langi ez’enjawulo, ensalosalo, emisono gy’okussa essira, n’ebifaananyi eby’emabega okusobola okuwuliziganya obulungi ebiteeso. Ebifaananyi eby'emabega ebya <select>
s bifunibwa ne .form-select
, so si .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)
})
})()
Browser esookera ddala
Tofaayo ku bubaka bw'okuddamu okukakasa obw'ennono oba okuwandiika JavaScript okukyusa enneeyisa za ffoomu? Byonna birungi, osobola okukozesa browser defaults. Gezaako okuleeta foomu eno wammanga. Okusinziira ku browser yo ne OS, ojja kulaba sitayiro ey’enjawulo katono ey’okuddamu.
Wadde nga emisono gino egy'okuddamu tegisobola kukola sitayiro na CSS, okyayinza okulongoosa ebiwandiiko by'okuddamu okuyita mu 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>
Oludda lwa seeva
Tukuwa amagezi okukozesa okukakasa ku ludda lwa kasitoma, naye mu mbeera nga weetaaga okukakasa ku ludda lwa seva, osobola okulaga ennimiro za foomu ezitali ntuufu era entuufu ne .is-invalid
ne .is-valid
. Weetegereze nti .invalid-feedback
nakyo kiwagirwa ne kiraasi zino.
Ku nnimiro ezitali ntuufu, kakasa nti obubaka obutali butuufu obw'okuddamu/ensobi bukwatagana n'ennimiro ya foomu ekwatagana ng'okozesa aria-describedby
(wetegereze nti ekintu kino kikkiriza ebisukka mu kimu id
okujulizibwa, singa ennimiro esonga dda ku biwandiiko bya foomu eby'enjawulo).
Okutereeza ensonga ne border radii.has-validation
, ebibinja by'okuyingiza byetaaga kiraasi ey'okugattako .
<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>
Ebintu ebiwagirwa
Emisono gy'okukakasa giriwo ku bifuga n'ebitundu bya foomu bino wammanga:
<input>
s ne<textarea>
s nga mulimu.form-control
(nga mw’otwalidde n’okutuuka ku kimu.form-control
mu bibinja by’ebiyingizibwa) .<select>
s nga balina.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>
Ebikozesebwa
Singa ensengeka ya foomu yo ekkiriza, osobola okukyusakyusa .{valid|invalid}-feedback
kiraasi ne .{valid|invalid}-tooltip
kiraasi okulaga ebiteeso by’okukakasa mu kigambo ky’ebikozesebwa ekiriko sitayiro. Kakasa nti olina omuzadde alina position: relative
ku yo for tooltip positioning. Mu kyokulabirako wansi, kiraasi zaffe ez’ennyiriri kino zirina dda, naye pulojekiti yo eyinza okwetaaga okuteekawo okulala.
<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 nga bwe kiri
Enkyukakyuka ezikyukakyuka
$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>");
Ebirungo ebitabuddwa
Mixins bbiri zigattibwa wamu, okuyita mu loopu yaffe , okukola emisono gyaffe egy’okuddamu okukakasa foomu.
@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;
}
}
}
}
Maapu
Eno ye maapu ya Sass ekakasa okuva mu _variables.scss
. Override oba okugaziya kino okukola embeera ez'enjawulo oba ez'okwongerako.
$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
)
);
Maapu za $form-validation-states
zisobola okubeeramu parameters ssatu ez'okwesalirawo okusazaamu obukodyo bw'ebikozesebwa n'emisono gy'okussa essira.
Kyabulijo
Ekozesebwa okuddiŋŋana ku $form-validation-states
miwendo gya maapu okukola emisono gyaffe egy’okukakasa. Enkyukakyuka zonna ku maapu ya Sass waggulu ejja kweyolekera mu CSS yo ekung’aanyiziddwa ng’oyita mu loopu eno.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Okulongoosa
Embeera z'okukakasa zisobola okulongoosebwa nga ziyita mu Sass ne $form-validation-states
maapu. Esangibwa mu _variables.scss
fayiro yaffe, maapu eno eya Sass y’engeri gye tukolamu embeera ezisookerwako valid
/ invalid
ez’okukakasa. Mulimu maapu eteekeddwa mu kisenge okulongoosa langi ya buli ssaza, akabonero, langi y’ekintu ekikozesebwa, n’ekisiikirize ky’okussa essira. Wadde nga tewali masaza malala gawagirwa bbulawuzi, abo abakozesa emisono egy’enjawulo basobola bulungi okwongerako ebiteeso bya ffoomu ebizibu ennyo.
Nsaba omanye nti tetukuwa magezi kulongoosa $form-validation-states
miwendo nga tokyusizza na form-validation-state
mixin .