Mirkaneessuu
Fayyadamtoota keetiif yaada gatii qabu, tarkaanfii fudhachuu danda'u mirkaneessuu unka HTML5 waliin, karaa amala durtii biraawzari ykn akkaataa amalaafi JaavaScript kenni.
Akkaataa itti hojjetu
Akkaataa mirkaneessi unkaa Bootstrap waliin hojjetu kunooti:
- Mirkaneessi unka HTML karaa CSS's lamaan pseudo-classes,
:invalid
fi:valid
.<input>
,<select>
, fi<textarea>
elementoota irratti hojjeta . - Bootstrap akkaataa
:invalid
fi gara gita:valid
warraatti bal'isa, yeroo baay'ee . Yoo kana hin taane, man'ee barbaadamu kamiyyuu gatii hin qabne fe'iinsa fuula irratti akka sirrii hin taaneetti mul'ata. Haala kanaan, yoom akka isaan kakaastu filachuu dandeessa (akkaataa idileetti erga unka galchuuf yaalamee booda)..was-validated
<form>
- Mul'ata unkaa deebisanii saaguuf (fakkeenyaaf, haala ergaa unkaa daayinamikii AJAX fayyadamuun),
.was-validated
gita<form>
ammas erga ergamee booda irraa haqi. - Akka duubatti deebi'uutti,
.is-invalid
fi.is-valid
gitaawwan bakka gita-sobaa mirkaneessuu gama sarvariidhaaf fayyadamuu danda'u ..was-validated
Kutaa warraa hin barbaadan . - Sababa danqaa akkaataa CSS itti hojjetu irraa kan ka'e,
<label>
gargaarsa JaavaScript amala malee to'annoo unkaa DOM keessatti dura dhufutti (yeroo ammaa) akkaataalee hojii irra oolchuu hin dandeenyu. - Biraawuzaroonni ammayyaa hundi API mirkaneessa danqaa deeggaru , malawwan JaavaScript walduraa duubaan too'annoo unkaa mirkaneessuuf.
- Ergaawwan yaada deebii durtii biraawzariitti fayyadamuu danda'u (tokkoon tokkoo biraawzariif adda addaa, fi karaa CSS kan hin style) ykn akkaataa yaada keenya amala HTML fi CSS dabalataa wajjin fayyadamuu danda'u.
setCustomValidity
Ergaawwan sirrii ta'uu amala JaavaScript keessatti waliin kennuu dandeessa .
Kana yaada keessa galchuun, akkaataawwan mirkaneessuu unkaa amala keenyaaf, gitawwan gama sarvarii filannoo, fi durtii biraawzariif demoowwan armaan gadii ilaali.
Akkaataawwan amala
novalidate
Ergaawwan mirkaneessuu unkaa Bootstrap amalaaf, amaloota boolii gara keetti dabaluu si barbaachisa <form>
. Kunis gorsa meeshaalee yaada durtii biraawzari hanqisa, garuu ammas APIwwan mirkaneessuu unkaa JaavaScript keessatti qaqqabummaa kenna. Unka armaan gadii dhiyeessuuf yaalaa; JavaScript keenya button submit jedhu addaan kutee yaada isiniif dabarsee isiniif dabarsa. :invalid
Yeroo galchuuf yaaltu, akkaataalee fi :valid
too'annoo unkaa kee irratti hojiirra oolan ni argita .
Akkaataan yaada amala halluu amala, daangaa, akkaataa xiyyeeffannoo, fi mallattoolee duubbee yaada haala gaariin walqunnamsiisuuf hojii irra oolchu. Mallattoolee duubbee <select>
s qofa waliin argamu .form-select
, malee hin argamu .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)
})
})()
Durtii biraawzari
Ergaawwan yaada mirkaneessuu amala ykn amala unkaa jijjiiruuf JaavaScript barreessuudhaaf fedhii hin qabduu? Hundi gaarii dha, durtii browser fayyadamuu dandeessa. Unka armaan gadii galchuuf yaalaa. Browser fi OS keessan irratti hundaa'uun akkaataa yaada xiqqoo adda ta'e ni argitu.
Akkaataan yaada kennuu kun CSS waliin akkaataa ta'uu kan hin dandeenye yoo ta'ellee, ammas barruu yaada deebii karaa JaavaScript dhuunfachuu dandeessa.
<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>
Gama sarvariitiin
Mirkaneessuu gama maamilaa fayyadamuu ni gorsina, garuu yoo mirkaneessuu gama sarvarii barbaadde, man'ee unkaa sirrii hin taanee fi sirrii ta'e fi waliin agarsiisuu .is-invalid
dandeessa .is-valid
. Hubadhaa innis .invalid-feedback
gita kanaan deeggaramee jira.
Man'eewwan sirrii hin taaneef, ergaan yaada/dogongoraa sirrii hin taane dirree unkaa barbaachisaa fayyadamuun walqabsiisuu isaa mirkaneessi aria-describedby
(amalli kun tokkoo ol id
akka wabii hayyamu hubadhu, yoo man'een duraan barruu unkaa dabalataa agarsiise).
Dhimmoota raadiyoo daangaa waliin sirreessuuf , gareewwan galtee .has-validation
gita dabalataa barbaadu .
<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>
Qaamolee deeggaraman
Akkaataaleen mirkaneessuu too'annoowwanii fi qaamolee unkaa armaan gadiitiif ni argamu:
<input>
s fi<textarea>
s waliin ( garee galtee keessatti.form-control
hanga tokko dabalatee ) ..form-control
<select>
s waliin.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>
Gorsa Meeshaalee
Yoo qindaa'inni unkaa kee hayyame, yaada mirkaneessuu gorsa meeshaa akkaataa keessatti agarsiisuuf gitawwan .{valid|invalid}-feedback
gitaaf jijjiiruu dandeessa . Tooltip positioning'f .{valid|invalid}-tooltip
warra irratti qabu qabaachuu kee mirkaneessi . position: relative
Fakkeenya armaan gadii keessatti, gitaawwan tarjaa keenya kana duraan qabu, garuu pirojektiin kee qindeessaa filannoo barbaadu danda'a.
<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 jedhama
Jijjiiramoota
$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>");
Mixins jedhaman
Miksiin lama walitti makamu, karaa loop keenyaa , akkaataa yaada deebii mirkaneessuu unkaa keenyaa uumuuf.
@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;
}
}
}
}
Kaartaa
Kun kaartaa Sass mirkaneessuu irraa _variables.scss
. Haalata adda addaa ykn dabalataa uumuuf kana irra darbi ykn dheeressi.
$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
)
);
Kaartoonni of gorsa meeshaalee $form-validation-states
fi akkaataa xiyyeeffannoo irra darbuuf qajoojiiwwan filannoo sadii qabaachuu danda'u.
Furgaasuu
$form-validation-states
Akkaataa mirkaneessuu keenya uumuuf gatiiwwan kaartaa irratti irra deddeebi'uuf fayyadama . Fooyya'iinsi kamiyyuu kaartaa Sass armaan olii irratti karaa loop kanaa CSS kee qindaa'e keessatti ni calaqqisa.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Dhuunfachiisuu
$form-validation-states
Haalawwan mirkaneessuu karaa Sass kaartaa waliin dhuunfachuu danda'u . Faayilii keenya keessatti kan argamu _variables.scss
, kaartaan Sass kun akkaataa haalata durtii valid
/ invalid
mirkaneessuu itti uumnudha. Kaartaa man'ee halluu, mallattoo, halluu gorsa meeshaa, fi golgaa xiyyeeffannoo tokkoon tokkoo haalataa dhuunfachuuf hammatame. Haalli biroo biraawzarootaan kan hin deeggaramne yoo ta'ellee, warri akkaataa amala fayyadaman salphaatti yaada unkaa walxaxaa ta'e dabaluu danda'u.
Hubadhaa osoo mixin hin fooyyessin gatiiwwan dhuunfachuu akka hin$form-validation-states
form-validation-state
gorsine .