Xaqiijinta
U sii jawaab celin qiimo leh, la shaqayn karo isticmaaleyaashaada qaab HTML5, iyada oo loo marayo habdhaqanka browserka caadiga ah ama qaababka gaarka ah iyo JavaScript.
Sida ay u shaqeyso
Waa kan sida xaqiijinta foomku ula shaqeyso Bootstrap:
- Xaqiijinta foomka HTML waxa lagu dabaqaa labada fasal ee been abuurka ah ee CSS,
:invalid
iyo:valid
. Waxay qusaysaa<input>
,<select>
, iyo<textarea>
curiyayaasha. - Bootstrap waxay u kala xadaynaysaa
:invalid
iyo:valid
qaababka.was-validated
fasalka waalidka, oo badanaa lagu dabaqo<form>
. Haddii kale, goob kasta oo loo baahan yahay oo aan qiimo lahayn ayaa u muuqata mid aan sax ahayn oo ku jirta culayska bogga. Sidan, waxaad dooran kartaa goorta aad dhaqaajinayso (sida caadiga ah ka dib marka la isku dayo soo gudbinta foomka). - Si dib loogu habeeyo muuqaalka foomka (tusaale ahaan, xaalada soo gudbinta foom firfircoon oo la isticmaalayo AJAX), ka saar
.was-validated
fasalka<form>
mar labaad soo gudbinta ka dib. - Dib-u-dhac ahaan,
.is-invalid
iyo.is-valid
fasallada waxaa loo isticmaali karaa halkii laga isticmaali lahaa fasallada been-abuurka ah ee xaqiijinta dhinaca server-ka . Uma baahna.was-validated
fasalka waalidka. - Caqabadaha ku jira sida CSS u shaqeyso awgeed, ma awoodno (hadda) ku dabaqi karno qaababka
<label>
ka hor inta aan la xakameynin foomka DOM iyada oo aan la helin caawimaad JavaScript caadiga ah. - Dhammaan daalacashada casriga ah waxay taageeraan ansaxinta xannibaadda API , taxane ah hababka JavaScript ee lagu xaqiijinayo kontaroolada foomka.
- Farimaha dib -u-celinta waxa laga yaabaa inay ka faa'iidaysato khaladka browserka (ka duwan biraawsar kasta, iyo mid aan habayn CSS) ama hababkayada jawaab celinta caadada oo leh HTML iyo CSS dheeraad ah.
- Waxaad ku siin kartaa farriimaha ansaxnimada gaarka ah
setCustomValidity
ee JavaScript.
Iyadoo taas maskaxda lagu hayo, ka fiirso bandhigyadan soo socda ee qaababka ansixinta qaabka caadiga ah, fasallada dhinaca server-ka ee ikhtiyaarka ah, iyo cilladaha browserka.
Hababka gaarka ah
Farriimaha xaqiijinta foomka Bootstrap caadadii, waxaad u baahan doontaa inaad ku darto novalidate
sifada booleankaaga <form>
. Tani waxay curyaamisaa aaladaha jawaab celinta caadiga ah ee biraawsarka, laakiin wali waxay siisaa gelitaanka API-yada ansaxinta foomka JavaScript. Isku day inaad gudbiso foomka hoose; JavaScript-kayaga ayaa kaa joojin doona badhanka soo gudbinta oo ku soo gudbin doona jawaab celinta. Markaad isku daydo inaad soo gudbiso, waxaad arki doontaa :invalid
iyo :valid
qaababka lagu dabaqay kontaroolada foomkaaga.
Hababka warcelinta gaarka ah waxay adeegsadaan midabada gaarka ah, xuduudaha, qaababka diirada, iyo astaanta asalka si ay si wanagsan ugu gudbiyaan jawaab celinta. Astaamaha asalka ah ee <select>
s waxaa lagu heli karaa oo keliya .form-select
, ee lama heli karo .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
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Browser-ka khaladka ah
Ma xiisaynayso fariimaha jawaab celinta ansixinta caadada ah ama qorista JavaScript si aad u bedesho habdhaqanka foomka? Wax kasta oo wanaagsan, waxaad isticmaali kartaa browser-ka caadiga ah. Isku day inaad soo gudbiso foomka hoose. Iyada oo ku xidhan biraawsarkaaga iyo OS-kaaga, waxaad arki doontaa qaab jawaab celin ka duwan.
Iyadoo qaababkan jawaab celinta aan lagu qaabayn karin CSS, waxaad weli ku habeyn kartaa qoraalka jawaab celinta 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>
Dhinaca server-ka
Waxaan kugula talineynaa isticmaalka ansaxinta dhinaca macmiilka, laakiin haddii ay dhacdo inaad u baahato ansaxinta dhinaca server-ka, waxaad muujin kartaa foom aan sax ahayn oo ansax ah oo leh .is-invalid
iyo .is-valid
. Ogow in .invalid-feedback
sidoo kale lagu taageeray fasaladan.
Goobaha aan sax ahayn, hubi in jawaab celinta khaldan/fariinta khaladka ah ay la xiriirto goobta foomamka ku habboon iyadoo la adeegsanayo aria-describedby
(iyagoo ogaanaya in sifadani ay u oggolaanayso in ka badan hal id
in la tixraaco, haddii goobta ay mar hore farta ku fiiqdo qoraal foom dheeraad ah).
Si loo xalliyo arrimaha ku saabsan raadiyaha xuduudka , kooxaha wax gelinta waxay u baahan yihiin .has-validation
fasal dheeraad ah.
<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>
Curiyayaasha la taageeray
Qaababka xaqiijinta ayaa diyaar u ah kontaroolada iyo qaybaha soo socda:
<input>
s iyo<textarea>
s leh.form-control
(ay ku jiraan ilaa mid ka mid.form-control
ah kooxaha wax gelinta)<select>
leh.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" 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>
Tilmaamaha Qalabka
Haddii qaabka qaabkaagu kuu ogolaado, waxaad u bedeli kartaa .{valid|invalid}-feedback
fasalada .{valid|invalid}-tooltip
fasalada si aad u muujiso jawaab celinta ansaxinta qalab habaysan. Hubi inaad haysato waalid position: relative
ku yaal meelaynta qalabaynta. Tusaalaha hoose, fasaladayada tiirarka ayaa tan hore u lahaa, laakiin mashruucaagu waxa uu u baahan karaa hab kale.
<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
Kala duwanaansho
$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.73.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>");
Isku qas
Laba isku-dar ah ayaa la isku daraa, iyada oo loo marayo wareeggayaga , si loo soo saaro qaababka jawaab celinta xaqiijinta foomka.
@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-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.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:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
Maab
Kani waa khariidadda Sass ee ansaxinta _variables.scss
. Tirtir ama kordhi tan si aad u abuurto gobolo kala duwan ama dheeraad ah.
$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
)
);
Khariidadaha $form-validation-states
waxay ka koobnaan karaan saddex cabbir oo ikhtiyaari ah si ay meesha uga saaraan tibaaxaha qalabka iyo qaababka diiradda.
Loop
Loo isticmaalo in lagu $form-validation-states
qiyaaso qiyamka khariidada si loo soo saaro qaababka ansixintayada. Wax ka bedel kasta oo lagu sameeyo khariidadda Sass ee kore waxay ka muuqan doontaa CSS-gaaga la soo ururiyey iyadoo loo marayo wareeggan.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Habaynta
Gobolada xaqiijinta waxa lagu habeyn karaa Sass oo leh $form-validation-states
khariidad. Ku yaal _variables.scss
faylkayaga, khariidaddan Sass waa sida aan u soo saarno xaaladaha caadiga ah valid
/ invalid
ansaxinta. Waxaa ku jira khariidad buul leh oo loogu talagalay in lagu habeeyo midabka gobol kasta, astaanta, midabka aaladda, iyo hooska diiradda. Iyadoo aanay jirin dawlado kale oo ay taageerayaan daalacashada, kuwa isticmaalaya qaababka caadiga ah waxay si fudud ugu dari karaan jawaab celin foom oo adag.