Tabbatarwa
Bayar da ra'ayi mai mahimmanci, mai aiki ga masu amfani tare da ingantaccen tsari na HTML5, ta hanyar tsoffin halayen burauza ko salon al'ada da JavaScript.
Yadda yake aiki
Anan ga yadda ingantaccen tsari ke aiki tare da Bootstrap:
- Ana amfani da ingantaccen tsarin HTML ta hanyar azuzuwan ɓarna biyu na CSS,
:invalid
da:valid
. Ya shafi<input>
,<select>
, da<textarea>
abubuwa. - Bootstrap ya keɓanta da salo
:invalid
da:valid
salo zuwa ajin iyaye.was-validated
, yawanci ana amfani da su ga<form>
. In ba haka ba, kowane filin da ake buƙata ba tare da ƙima yana nunawa a matsayin mara inganci akan nauyin shafi. Ta wannan hanyar, zaku iya zaɓar lokacin kunna su (yawanci bayan an yi ƙoƙarin ƙaddamar da fom). - Don sake saita bayyanar fom (misali, a cikin yanayin ƙaddamar da tsari mai ƙarfi ta amfani da AJAX), cire
.was-validated
ajin daga<form>
sake bayan ƙaddamarwa. - A matsayin koma baya,
.is-invalid
kuma.is-valid
ana iya amfani da azuzuwan maimakon azuzuwan ƙididdiga don tabbatar da gefen uwar garken . Ba sa buƙatar.was-validated
ajin iyaye. - Saboda ƙuntatawa a cikin yadda CSS ke aiki, ba za mu iya (a halin yanzu) amfani da salo ga
<label>
wanda ya zo gaban sarrafa tsari a cikin DOM ba tare da taimakon JavaScript na al'ada ba. - Duk masu bincike na zamani suna goyan bayan ingantaccen ingantaccen API , jerin hanyoyin JavaScript don tabbatar da sarrafa tsari.
- Saƙonnin mayar da martani na iya yin amfani da abubuwan da suka dace na burauza (mabambanta ga kowane mai bincike, kuma wanda ba za a iya salo ta hanyar CSS ba) ko salon martani na al'ada tare da ƙarin HTML da CSS.
- Kuna iya samar da saƙon ingantacce na al'ada da su
setCustomValidity
a cikin JavaScript.
Tare da wannan a zuciya, yi la'akari da fa'idodin demos masu zuwa don salon ingantaccen sigar mu ta al'ada, azuzuwan gefen uwar garken zaɓi, da rashin kuskuren burauza.
Salon al'ada
Don saƙon ingantaccen tsari na Bootstrap na al'ada, kuna buƙatar ƙara novalidate
sifa ta boolean zuwa <form>
. Wannan yana hana tsoffin bayanan bayanan kayan aikin mai bincike, amma har yanzu yana ba da dama ga API ɗin ingantaccen tsari a JavaScript. Yi ƙoƙarin ƙaddamar da fom ɗin da ke ƙasa; JavaScript ɗin mu zai katse maɓallin ƙaddamarwa kuma ya ba da amsa gare ku. Lokacin ƙoƙarin ƙaddamarwa, za ku ga da :invalid
kuma :valid
salon da aka yi amfani da su akan sarrafa fom ɗin ku.
Salon amsa na al'ada suna amfani da launuka na al'ada, iyakoki, salon mayar da hankali, da gumakan bango don ingantacciyar hanyar sadarwa. Gumakan bango na <select>
s suna samuwa kawai tare da .form-select
, kuma ba .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)
})
})()
Matsalolin Browser
Ba ku da sha'awar saƙon martani na tabbatarwa na al'ada ko rubuta JavaScript don canza halayen tsari? Da kyau, zaku iya amfani da abubuwan da ba a iya amfani da su ba. Gwada ƙaddamar da fom ɗin da ke ƙasa. Dangane da burauzar ku da kuma OS, zaku ga salon ra'ayi daban-daban.
Duk da yake waɗannan salon amsa ba za a iya sa su tare da CSS ba, har yanzu kuna iya keɓance rubutun ra'ayin ta hanyar 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>
Gefen uwar garken
Muna ba da shawarar yin amfani da ingantaccen gefen abokin ciniki, amma idan kuna buƙatar ingantaccen gefen uwar garken, zaku iya nuna mara inganci da filayen fom tare .is-invalid
da .is-valid
. Lura cewa .invalid-feedback
kuma ana goyan bayan waɗannan azuzuwan.
Don filayen da ba su da inganci, tabbatar da cewa an haɗa saƙon kuskure mara inganci tare da filin da ya dace ta amfani da shi aria-describedby
(lura da cewa wannan sifa tana ba da damar yin nuni fiye da ɗaya id
, idan filin ya riga ya nuna ƙarin rubutu).
Don gyara al'amura tare da radiyon iyaka , ƙungiyoyin shigarwa suna buƙatar ƙarin .has-validation
aji.
<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>
Abubuwan tallafi
Ana samun salon tabbatarwa don sarrafa nau'i mai zuwa da abubuwan haɗin gwiwa:
<input>
s da<textarea>
s tare da.form-control
(gami da har zuwa ɗaya.form-control
a cikin ƙungiyoyin shigarwa)<select>
s da.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>
Nasihun kayan aiki
Idan shimfidar tsari na ku ya ba shi damar, zaku iya musanya .{valid|invalid}-feedback
azuzuwan don .{valid|invalid}-tooltip
azuzuwan don nuna ra'ayoyin ingantawa a cikin salo mai salo na kayan aiki. Tabbatar cewa kuna da iyaye tare da position: relative
shi don saka kayan aiki. A cikin misalin da ke ƙasa, azuzuwan rukunin mu sun riga sun sami wannan, amma aikinku na iya buƙatar saitin madadin.
<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
Masu canji
$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
Ana haɗe mixins guda biyu tare, ta hanyar madauki , don samar da salon ingantaccen bayanin mu.
@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;
}
}
}
}
Taswira
Wannan shine ingantaccen taswirar Sass daga _variables.scss
. Rage ko tsawaita wannan don samar da jihohi daban-daban ko ƙarin.
$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
)
);
Taswirorin na $form-validation-states
iya ƙunsar sigogin zaɓi guda uku don ƙetare matakan kayan aiki da salon mayar da hankali.
Madauki
An yi amfani da shi don $form-validation-states
ƙididdige ƙimar taswira don samar da salon ingantaccen mu. Duk wani gyare-gyare ga taswirar Sass na sama za a bayyana a cikin CSS ɗinku da aka haɗa ta wannan madauki.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Keɓancewa
Ana iya keɓance jihohin tabbatarwa ta hanyar Sass tare da $form-validation-states
taswira. Ana cikin _variables.scss
fayil ɗin mu, wannan taswirar Sass shine yadda muke samar da tsoffin jihohi valid
/ tabbatarwa. invalid
Haɗe da taswirar gida don keɓance launi na kowace jiha, gunki, launi na kayan aiki, da inuwar mayar da hankali. Duk da yake babu wasu jihohi da masu bincike ke tallafawa, waɗanda ke amfani da salon al'ada na iya ƙara ƙarin ra'ayi mai rikitarwa cikin sauƙi.
Da fatan za a lura cewa ba mu bayar da shawarar keɓance $form-validation-states
ƙima ba tare da gyaggyara abin haɗin form-validation-state
ba .