in English
Netefatšo
Fana ka ditshwaelo tša bohlokwa, tše di ka tšeago kgato go badiriši ba gago ka netefatšo ya foromo ya HTML5, ka maitshwaro a go se fetoge a sephephediši goba mekgwa ya tlwaelo le JavaScript.
Letlakaleng le
Re a tseba gore ga bjale mekgwa ya netefatšo ya tlwaelo ya lehlakore la moreki le ditšhišinyo tša didirišwa ga di fihlelelege, ka ge di sa pepentšhwa go theknolotši ya go thuša. Ge re dutše re šoma ka tharollo, re tla kgothaletša go diriša kgetho ya lehlakore la seva goba mokgwa wa netefatšo ya sephephediši sa go se fetoge.
Kamoo e šomago ka gona
Mona ke kamoo netefatšo ya foromo e šomago ka gona ka Bootstrap:
- Netefatšo ya foromo ya HTML e dirišwa ka dihlopha tše pedi tša maaka tša CSS,
:invalidle:valid. E šoma go<input>,<select>, le<textarea>dielemente. - Bootstrap e akaretša
:invalidle:validmekgwa go sehlopha sa motswadi.was-validated, gantši e dirišwa go<form>. Go sego bjalo, tšhemo efe goba efe ye e nyakegago ye e se nago boleng e bontšha bjalo ka yeo e sa šomego go laetša letlakala. Ka tsela ye, o ka kgetha gore o tla di tsenya tirišong neng (ka tlwaelo ka morago ga ge go lekile go romela foromo). - Go seta gape ponagalo ya foromo (mohlala, tabeng ya ditlhagišo tša foromo ye e fetogago ka go šomiša AJAX), tloša
.was-validatedsehlopha go tšwa go<form>gape ka morago ga thomelo. - Bjalo ka fallback,
.is-invalidgomme.is-validdiklase di ka šomišwa go e na le diklase tša maaka bakeng sa netefatšo ya lehlakoreng la seva . Ga di nyake.was-validatedsehlopha sa motswadi. - Ka lebaka la dithibelo tša ka fao CSS e šomago ka gona, re ka se kgone (ga bjale) go diriša mekgwa go a
<label>yeo e tlago pele ga taolo ya foromo ka go DOM ntle le thušo ya JavaScript ya tlwaelo. - Diphensele ka moka tša sebjalebjale di thekga API ya netefatšo ya thibelo , letoto la mekgwa ya JavaScript ya go netefatša ditaolo tša foromo.
- Melaetša ya ditshwayotshwayo e ka šomiša dilo tša go se fetoge tša sephephediši (tše di fapanego bakeng sa sephephediši se sengwe le se sengwe, le tšeo di sa setaelego ka CSS) goba mekgwa ya rena ya ditshwayotshwayo ya tlwaelo ka HTML le CSS ya tlaleletšo.
- O ka fana ka melaetša ya go nepagala ya tlwaelo ka
setCustomValidityka go JavaScript.
Ka seo ka kgopolong, ela hloko di-demo tše di latelago bakeng sa mekgwa ya rena ya go netefatša foromo ya tlwaelo, diklase tša boikgethelo tša lehlakoreng la seva, le dilo tša go se fetoge tša sephephediši.
Mekgwa ya tlwaelo
Bakeng sa melaetša ya netefatšo ya foromo ya Bootstrap ya tlwaelo, o tla swanelwa ke go oketša novalidateseka sa boolean go ya gago <form>. Se se šitiša didirišwa tša ditshwayotshwayo tša maitirelo tša sephephediši, eupša se sa fa phihlelelo go di-API tša netefatšo ya foromo ka go JavaScript. Leka go romela foromo ye e lego ka mo tlase; JavaScript ya rena e tla thibela konope ya go romela gomme ya go fetišetša ditshwayotshwayo. Ge o leka go romela, o tla bona :invalidle :validditaele di dirišitšwe go ditaolo tša gago tša foromo.
Mekgwa ya ditshwayotshwayo ya tlwaelo e diriša mebala ya tlwaelo, mellwane, mekgwa ya go tsepamiša kgopolo, le diaekhone tša ka morago go kgokaganya ditshwaotshwao gakaone. Diaekhone tša ka morago tša <select>s di hwetšagala fela ka .form-select, e sego .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)
})
})()Di-default tša sephephediši
Ga o na kgahlego go melaetša ya ditshwayotshwayo tša netefatšo ya tlwaelo goba go ngwala JavaScript go fetoša maitshwaro a foromo? All molemo, o ka sebelisa sebadi defaults. Leka go romela foromo ye e lego ka mo tlase. Go ya ka sephephediši sa gago le OS, o tla bona setaele se se fapanego ganyenyane sa ditshwayotshwayo.
Le ge e le gore mekgwa ye ya ditshwaotshwao e ka se setaele ka CSS, o sa kgona go tlwaetša sengwalwa sa ditshwaotshwao ka 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>Lehlakore la seva
Re kgothaletša go diriša netefatšo ya lehlakore la moreki, eupša ge go ka direga gore o nyaka netefatšo ya lehlakore la seva, o ka bontšha mafelo a foromo ao a sa šomego le ao a šomago ka .is-invalidle .is-valid. Hlokomela gore .invalid-feedbackgape e thekgwa ka diklase tše.
Bakeng sa mafelo ao a sa šomego, netefatša gore molaetša wa ditshwaotshwao/phošo wo o sa šomego o amana le tšhemo ya foromo ya maleba ka go šomiša aria-describedby(hlokomela gore seka se se dumelela go šupša go feta e tee id, ge go ka direga gore tšhemo e šetše e šupa sengwalwa sa tlaleletšo sa foromo).
Go lokiša ditaba ka radius ya mollwane , dihlopha tša tsenyo di nyaka .has-validationsehlopha sa tlaleletšo.
<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>Dielemente tše di thekgwago
Mekgwa ya netefatšo e a hwetšagala bakeng sa ditaolo tša foromo le dikarolo tše di latelago:
<input>s le<textarea>s ka.form-control(go akaretšwa go fihla go e tee.form-controlka dihlopheng tša tsenyo) .<select>s ka.form-select.form-checks
<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>Dikeletšo tša didirišwa
Ge e le gore peakanyo ya gago ya foromo e e dumelela, o ka fapantšha .{valid|invalid}-feedbackdiklase ka .{valid|invalid}-tooltipdiklase go bontšha ditshwaotshwao tša netefatšo ka go keletšo ya sedirišwa ya setaele. Kgonthišetša gore o na le motswadi yo a nago le position: relativegodimo ga yona bakeng sa go beakanya keletšo ya didirišwa. Mohlaleng wo o lego ka mo tlase, diklase tša rena tša dikholomo di šetše di na le se, eupša porojeke ya gago e ka nyaka peakanyo ye nngwe.
<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
Diphetogo
$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>");
Ditswaki
Di-mixin tše pedi di kopantšwe mmogo, ka seloupu sa rena , go tšweletša mekgwa ya rena ya ditshwayotshwayo tša netefatšo ya foromo.
@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;
}
}
}
}
}
Mmapa
Ye ke mmapa wa Sass wa netefatšo go tšwa go _variables.scss. Tloša goba o katološa se go tšweletša maemo a go fapana goba a tlaleletšo.
$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
)
);
Dimmapa tša $form-validation-statesdi ka ba le ditekanyetšo tše tharo tša boikhethelo go tloša ditšhišinyo tša didirišwa le mekgwa ya go tsepamiša kgopolo.
Segole
E šomišwa go ipoeletša godimo ga $form-validation-statesdikelo tša mmapa go tšweletša mekgwa ya rena ya netefatšo. Diphetogo dife goba dife go mmapa wa Sass wo o lego ka mo godimo di tla bonagala ka go CSS ya gago ye e kgobokeditšwego ka seloupu se.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Go dira gore e be ya gago
E re netefatso ka customized ka Sass le ' $form-validation-statesmapa. E hwetšwa ka faeleng ya rena _variables.scss, mmapa wo wa Sass ke ka fao re tšweletšago maemo a go se fetoge valid/ invalida netefatšo. Go akaretšwa mmapa wo o tsentšwego ka gare ga sehlaga bakeng sa go tlwaetša mmala wa mmušo o mongwe le o mongwe, leswao, mmala wa keletšo ya sedirišwa le moriti wa go tsepamiša kgopolo. Le ge go se na dinaga tše dingwe tšeo di thekgwago ke diphensele, bao ba dirišago mekgwa ya tlwaelo ba ka oketša gabonolo ditshwaotshwao tša foromo tše di raraganego kudu.