Kutsimikizira
Perekani ndemanga zamtengo wapatali, zotheka kwa ogwiritsa ntchito anu potsimikizira mafomu a HTML5, pogwiritsa ntchito machitidwe osasintha a msakatuli kapena masitayelo anu ndi JavaScript.
Momwe zimagwirira ntchito
Umu ndi momwe kutsimikizira mawonekedwe kumagwirira ntchito ndi Bootstrap:
- Kutsimikizika kwa mawonekedwe a HTML kumagwiritsidwa ntchito kudzera m'makalasi awiri achinyengo a CSS,
:invalid
ndi:valid
. Zimakhudza<input>
,<select>
, ndi<textarea>
zinthu. - Bootstrap imayang'ana
:invalid
ndi:valid
masitayelo ku.was-validated
kalasi ya makolo, nthawi zambiri amagwiritsidwa ntchito ku<form>
. Kupanda kutero, gawo lililonse lofunikira lopanda mtengo likuwoneka ngati losavomerezeka pamasamba. Mwanjira iyi, mutha kusankha nthawi yoti muyambitse (nthawi zambiri mukayesa kutumiza fomu). - Kuti mukonzenso mawonekedwe a fomuyo (mwachitsanzo, popereka mawonekedwe osinthika pogwiritsa ntchito AJAX), chotsani
.was-validated
kalasiyo<form>
pambuyo popereka. - Monga kubweza,
.is-invalid
ndipo.is-valid
makalasi atha kugwiritsidwa ntchito m'malo mwa pseudo-class kuti atsimikizire mbali ya seva . Safuna.was-validated
kalasi ya makolo. - Chifukwa cha zopinga momwe CSS imagwirira ntchito, sitingathe (pakali pano) kugwiritsa ntchito masitayelo ku
<label>
omwe amabwera patsogolo pa mawonekedwe mu DOM popanda kuthandizidwa ndi JavaScript. - Asakatuli onse amakono amathandizira API yotsimikizira zoletsa , njira zingapo za JavaScript zotsimikizira kuwongolera mawonekedwe.
- Mauthenga oyankha atha kugwiritsa ntchito zosasintha za msakatuli (zosiyana pa msakatuli uliwonse, komanso zosalembedwera kudzera pa CSS) kapena masitayelo athu oyankha omwe ali ndi HTML ndi CSS yowonjezera.
- Mutha kupereka mauthenga ovomerezeka ndi
setCustomValidity
JavaScript.
Poganizira izi, lingalirani ma demo otsatirawa a masitayelo athu otsimikizira mawonekedwe, makalasi osankha pa seva, ndi kusasintha kwa msakatuli.
Masitayelo mwamakonda
Kwa mauthenga otsimikizira mawonekedwe a Bootstrap, muyenera kuwonjezera mawonekedwe a novalidate
boolean ku fayilo yanu ya <form>
. Izi zimayimitsa zida zosinthira msakatuli, komabe zimapereka mwayi wopeza ma API otsimikizira mu JavaScript. Yesani kutumiza fomu ili pansipa; JavaScript yathu idumpha batani lotumiza ndikutumiza ndemanga kwa inu. Mukayesa kutumiza, muwona mawonekedwe :invalid
ndi :valid
masitayelo akugwiritsidwa ntchito pazowongolera mafomu anu.
Masitayelo oyankha mwamakonda anu amagwiritsa ntchito mitundu yokhazikika, malire, masitayelo akutsogolo, ndi zithunzi zakumbuyo kuti athe kulumikizana bwino ndi mayankho. Zithunzi zakumbuyo za <select>
s zimapezeka ndi .form-select
, osati .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)
})
})()
Zosasintha za msakatuli
Simukufuna kumva mauthenga otsimikizira kapena kulemba JavaScript kuti musinthe machitidwe? Zabwino zonse, mutha kugwiritsa ntchito osasintha osatsegula. Yesani kutumiza fomu ili pansipa. Kutengera msakatuli wanu ndi OS, muwona mayankho osiyanasiyana.
Ngakhale masitayelo oyankhawa sangalembedwe ndi CSS, mutha kusinthanso zolemba zanu kudzera 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>
Mbali ya seva
Tikukulimbikitsani kugwiritsa ntchito kutsimikizira kwa kasitomala, koma ngati mukufuna kutsimikizira mbali ya seva, mutha kuwonetsa magawo omwe ali olakwika komanso ovomerezeka .is-invalid
ndi .is-valid
. Dziwani kuti .invalid-feedback
amathandizidwanso ndi makalasi awa.
Pazigawo zosavomerezeka, onetsetsani kuti ndemanga yolakwika/uthenga wolakwika ukulumikizidwa ndi gawo loyenera la fomu pogwiritsa ntchito aria-describedby
(pozindikira kuti mawonekedwewa amalola kuti oposa amodzi atchulidwe id
, ngati gawolo liloza kale ku mawu owonjezera).
Kukonza zovuta ndi malire a radii , magulu olowetsa amafunikira .has-validation
kalasi yowonjezera.
<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>
Zinthu zothandizira
Masitayelo otsimikizira alipo pazowongolera mafomu otsatirawa ndi zigawo zake:
<input>
s ndi<textarea>
s ndi.form-control
(kuphatikiza mpaka m'modzi.form-control
m'magulu olowetsa)<select>
s ndi.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>
Malangizo
Ngati masanjidwe anu amaloleza, mutha kusintha .{valid|invalid}-feedback
makalasiwo .{valid|invalid}-tooltip
kuti awonetse mayankho otsimikizira mu chida cholembedwa. Onetsetsani kuti muli ndi kholo lomwe lili ndi position: relative
chida chothandizira. Muchitsanzo chomwe chili pansipa, makalasi athu ali ndi izi kale, koma polojekiti yanu ingafunike kukhazikitsidwa kwina.
<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
Zosintha
$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>");
Zosakaniza
Zosakaniza ziwiri zimaphatikizidwa palimodzi, kudzera mu loop yathu , kuti tipange masitaelo athu otsimikizira mawonekedwe.
@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;
}
}
}
}
Mapu
Awa ndiye mapu otsimikizira a Sass ochokera ku _variables.scss
. Chotsani kapena onjezerani izi kuti mupange zigawo zosiyana kapena zowonjezera.
$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
)
);
Mapu a $form-validation-states
akhoza kukhala ndi magawo atatu osankhidwa kuti achotse zida ndi masitaelo olunjika.
Lupu
Amagwiritsidwa ntchito mobwerezabwereza $form-validation-states
pamapu kuti apange masitaelo athu otsimikizira. Zosintha zilizonse pamapu a Sass omwe ali pamwambawa awonetsedwa mu CSS yanu yopangidwa kudzera pa loop iyi.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Kusintha mwamakonda
Mayiko otsimikizira atha kusinthidwa makonda kudzera pa Sass ndi $form-validation-states
mapu. Zopezeka mufayilo yathu _variables.scss
, mapu a Sass ndi momwe timapangira zokhazikika valid
/ invalid
zovomerezeka. Kuphatikizidwa ndi mapu okhazikitsidwa kuti musinthe mtundu wa dziko lililonse, chithunzi, mtundu wa zida, ndi mithunzi yolunjika. Ngakhale kuti palibe mayiko ena omwe amathandizidwa ndi asakatuli, omwe amagwiritsa ntchito masitayelo azokonda amatha kuwonjezera mayankho ovuta kwambiri.
Chonde dziwani kuti sitikulangiza kusintha makonda $form-validation-states
popanda kusinthanso form-validation-state
mixin .